How to create a PDF table from ObservableCollection in UWP

Syncfusion Essential PDF is the UWP PDF library used to create, read, and edit PDF documents. Using this library, you can draw the table by using ObservableCollection in a PDF document in UWP platform.

Steps to draw the table using ObservableCollection to the PDF document programmatically:

1. Create a new UWP application project.
2. Install the Syncfusion.Pdf.UWP NuGet package as reference to your UWP applications from NuGet.org.
3. In the MainPage.xaml, add a new button as follows.

   <Page
       x:Class="EuroSymbolSample.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:EuroSymbolSample"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
       <Grid>
           <Button x:Name="btn1" Content="Generate PDF" Click="OnButtonClick" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
       </Grid>
   </Page>
   

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

   using Syncfusion.Pdf;
   using Syncfusion.Pdf.Graphics;
   using Syncfusion.Pdf.Grid;
   

5. Add a new class file in this UWP sample project, right-click the project and select Add -> Class and name it like Provider.cs. Add the following code snippet in the newly created Provider.cs class.

   internal sealed class Provider
   {
       /// <summary>
       /// Create the observable collection
       /// </summary>
       /// <returns></returns>
       internal static ObservableCollection<Adventure> GetProducts()
       {
           ObservableCollection<Adventure> AdventureCollection = new ObservableCollection<Adventure>();
           for (int i = 0; i < 10; i++)
           {
               Adventure adventureobj = new Adventure();
               adventureobj.CustomerID = "ERNSH";
               adventureobj.OrderID = i.ToString();
               adventureobj.ShipAddress = "Kirchgasse 6";
               adventureobj.ShipCity = "Graz";
               adventureobj.ShipCountry = "Austria";
               adventureobj.ShipName = "Ernst Handel";
               AdventureCollection.Add(adventureobj);
           }
           return AdventureCollection;
       }
   }
   /// <summary>
   /// Represents the customer details
   /// </summary>
   internal class Adventure
   {
       public string OrderID { get; set; }
       public string CustomerID { get; set; }
       public string ShipName { get; set; }
       public string ShipAddress { get; set; }
       public string ShipCity { get; set; }
       public string ShipCountry { get; set; }
   }
   

6. Include the following code snippet in the click event of the button in MainPage.xaml.cs to draw the table to the PDF document using observable collection and save it in a stream.

   //Create a new PDF document
   PdfDocument doc = new PdfDocument();
    
   //Add a new PDF page
   PdfPage page = doc.Pages.Add();
    
   //Create the data source for the table
   ObservableCollection<Adventure> AdventureDetails = Provider.GetProducts();
    
   //Create a new PDF grid
   PdfGrid grid = new PdfGrid();            
    
   //Add the data source
   grid.DataSource = AdventureDetails;
    
   //Apply built-in grid style
   grid.ApplyBuiltinStyle(PdfGridBuiltinStyle.GridTable6Colorful);         
    
   //Creates the layout format for grid
   PdfGridLayoutFormat layoutFormat = new PdfGridLayoutFormat();
    
   //Set the layout type as paginate
   layoutFormat.Layout = PdfLayoutType.Paginate;
    
   //Draws the grid to the PDF page
   PdfGridLayoutResult gridResult = grid.Draw(page, new RectangleF(new PointF(0, 40), new SizeF(page.Graphics.ClientSize.Width, page.Graphics.ClientSize.Height - 100)), layoutFormat);
    
   MemoryStream stream = new MemoryStream();
    
   //Save the document
   doc.Save(stream);
    
   //Close the document
   doc.Close(true);
    
   //Save the PDF stream to physical file
   Save(stream, "output.pdf");
   

7. Use the following helper method to save the stream as a physical file and open the file for viewing.

   #region Helper Methods
   public async void Save(Stream stream, string filename)
           {
               stream.Position = 0;
               StorageFile stFile;
               if (!(Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons")))
               {
                   FileSavePicker savePicker = new FileSavePicker();
                   savePicker.DefaultFileExtension = ".pdf";
                   savePicker.SuggestedFileName = "Output";
                   savePicker.FileTypeChoices.Add("Adobe PDF Document", new List<string>() { ".pdf" });
                   stFile = await savePicker.PickSaveFileAsync();
               }
               else
               {
                   StorageFolder local = Windows.Storage.ApplicationData.Current.LocalFolder;
                   stFile = await local.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting);
               }
               if (stFile != null)
               {
                   Windows.Storage.Streams.IRandomAccessStream fileStream = await stFile.OpenAsync(FileAccessMode.ReadWrite);
                   Stream st = fileStream.AsStreamForWrite();
             st.SetLength(0);
                   st.Write((stream as MemoryStream).ToArray(), 0, (int)stream.Length);
                   st.Flush();
                   st.Dispose();
                   fileStream.Dispose();
                   MessageDialog msgDialog = new MessageDialog("Do you want to view the Document?", "File created.");
                   UICommand yesCmd = new UICommand("Yes");
                   msgDialog.Commands.Add(yesCmd);
                   UICommand noCmd = new UICommand("No");
                   msgDialog.Commands.Add(noCmd);
                   IUICommand cmd = await msgDialog.ShowAsync();
                   if (cmd == yesCmd)
                   {
                       //Launch the retrieved file
                       bool success = await Windows.System.Launcher.LaunchFileAsync(stFile);
                   }
               }
           }
   #endregion
   

By executing the program, you will get the PDF document as follows.

A complete working sample can be downloaded from TableSample.zip

Take a moment to peruse the documentation, where you can find other options like built-in table styles, cell customization, row customization, and table pagination to the PDF document.

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