How to create a table without overlapping the header and footer in PDF document in Xamarin Forms

The Syncfusion Essential PDF is a Xamarin PDF library used to create, read, and edit PDF documents. Using this library, you can create a PDF from the collection view data in Xamarin Forms.

Steps to create a PDF from the collection view data in Xamarin Forms

1. Create a new C# Xamarin.Forms application project.

2. Select a project template and required platforms to deploy the application. In this application, the portable assemblies to be shared across multiple platforms, the .NET Standard code sharing strategy has been selected. For more details about code sharing, refer to here.
   Note:

   If the .NET Standard is not available in the code-sharing strategy, the Portable Class Library can be selected.

3. Install the Syncfusion.Xamarin.Pdf NuGet package as a reference to your .NET Framework application from NuGet.org.

4. Add new Forms XAML page in the portable project if there is no XAML page is defined in the App class. Otherwise, proceed to the next step.

1. To add the new XAML page, right-click the project and select Add -> New Item and add a Forms XAML Page from the list. Name it as MainPage.
2. In-App class of portable project (App.cs), replace the existing constructor of App class with the following code sample that invokes the MainPage.

   public App()
   {
       //The root page of your application
       MainPage = new MainPage();
   }
   

5. In the MainPage.xaml, add collection view and button as follows.

   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:CollectionViewSample"
                x:Class="CollectionViewSample.MainPage">
    
       <StackLayout>
           <CollectionView x:Name="collectionViewList">
               <CollectionView.ItemsSource>
                   <x:Array Type="{x:Type x:String}">
                       <x:String>Kayaking</x:String>
                       <x:String>Bobsleigh</x:String>
                       <x:String>Canoeing</x:String>
                       <x:String>Cross-country skiing</x:String>
                       <x:String>Rafting</x:String>
                       <x:String>Skeleton</x:String>
                       <x:String>Skibobbing</x:String>
                   </x:Array>
               </CollectionView.ItemsSource>
           </CollectionView>
    
           <Button Text="Generate Document" Clicked="OnButtonClicked" HorizontalOptions="Center"/>
    
       </StackLayout>
    
   </ContentPage>
    
   

6. Include the following namespaces in the MainPage.xaml.cs file.

   using Syncfusion.Pdf;
   using Syncfusion.Pdf.Graphics;
   using Syncfusion.Drawing;
   

7. Include the following code sample in the click event of the button in MainPage.xaml.cs file to create a PDF from the collection view and save it as a stream.

   //Create a new PDF document
   PdfDocument document = new PdfDocument();
    
   //Add a page to the document
   PdfPage page = document.Pages.Add();
    
   //Create PDF graphics for the page
   PdfGraphics graphics = page.Graphics;
    
   //Set the standard font
   PdfFont font = new PdfStandardFont(PdfFontFamily.Helvetica, 20);
    
   int x = 0;
   int y = 0;
    
   foreach(var value in collection)
   {
       string str = value.ToString();
    
       //Draw string in the PDF page
       page.Graphics.DrawString(str, font, PdfBrushes.Black, new PointF(x,y));
    
       y += 30;
   }
    
   //Save the document to the stream
   MemoryStream stream = new MemoryStream();
   document.Save(stream);
    
   //Close the document
   document.Close(true);
    
   stream.Position = 0;
    
   //Save the stream as a file in the device and invoke it for viewing
   Xamarin.Forms.DependencyService.Get<ISave>().SaveAndView("Sample.pdf", "application/pdf", stream);
   

8. Download the helper files from this link and add them to the mentioned project. These helper files allow you to save the stream as a physical file and open the file for viewing.

• Create a new XML file with the name of provider_paths.xml under the Android project Resources folder and add the following code in it.

Ex: Resources/xml/provider_paths.xml

<?xml version="1.0" encoding="utf-8" ?> 
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <external-path name="external_files" path="."/>
</paths>

• Add the following code to the AndroidManifest.xml file located under Properties/AndroidManifest.xml.

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.CollectionViewSample">
   <uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
   <application android:label="CollectionViewSample.Android">
      <provider android:name="android.support.v4.content.FileProvider"
           android:authorities="${applicationId}.provider"
           android:exported="false"
           android:grantUriPermissions="true">
        <meta-data android:name="android.support.FILE_PROVIDER_PATHS"
                   android:resource="@xml/provider_paths" />
      </provider>
    </application>
  </manifest>
  

9. Compile and execute the application. This creates a PDF from the collection view data.

Download the complete working sample from CollectionViewSample.zip.

Take moment to peruse the documentation.  You can find other options like create PDFs in Xamarin, create PDF documents with images, create PDF documents with tables, create PDF documents with basic elements, filling forms, and merge PDF documents.

Refer to here to explore a rich set of Syncfusion Essential PDF features. 

See Also:

Create a PDF document in Xamarin Forms