Generate PDF Files from SharePoint List Items with SPFx
This example project shows how you can generate Pdf files in a browser using SharePoint list items as a data source. You can start generation with actions in a SharePoint list or use a web part.
The source code for the project is available in the github repository.
There are several ways to generate pdf documents in SharePoint: with browser-only code, with Flow, with Word Online, with custom Azure function or web service. This project shows how you can generate a pdf document using a code that runs locally in a user’s browser.
There is a demo for four scenarios in this project.
Export a single item: you can select a single item in a SharePoint list and call
Export Item action to generate a pdf file. The file will contain a list item’s info in a custom layout.
Export a list of items: you can select multiple items in a list and call
Export Items action to generate a pdf for selected items. The fill will contain a table with items’ info.
Create a travel list: a
Travel List action is similar to
Export Item action but generates more complex pdf file. The file will contain a selected item’s info and a generated Bing map image with a route between the source and destination points specified in the item properties.
Export to Pdf web part: gives an example of the same functionality wrapped in a web part instead of list actions.
The source code is available in the src folder. It contains the following folders:
- extensions — contains a code for an extension that defines list actions.
- webparts — contains a code of the
Export to Pdfweb part.
- services — contains a code for services that implement pdf generation, Bing map generation, and accessing SharePoint list items.
- deploy — contains a script for provisioning the
Travellist that is needed for the demo to work.
The PdfService.ts contains the logic for creating pdf files. It exports the
generateTravelListToPdf functions that generate pdfs. Pdf files got generated on the fly with a help of jspdf library, and jspdf-autotable plugin for jspdf is used to generate tables.
Bing map generation
Travel List action generates a pdf file with a Bing map inside. The map is a static image that shows a route between the source and destination points defined in a selected SharePoint item. All the logic for a static map generation is located in the MapService.ts file.
You can check my How to Get the Static Bing Maps Image post to learn more about a static Bing map generation.
The source code for the extension is straightforward.
onListViewUpdated function, we track that export actions for a single item would be available only if a single item has been selected. In the
onExecute function, we get info about selected items and call selected action.
There is also a private
httpGet function defined that wraps a call to a standard SPFx
HttpClient.get function. This function got passed to a function that generates pdf with a travel list. This way a pdf generation function does not depend on SharePoint and can be reused in a non-SharePoint environment.
The web part provides the same functionality as the extension. The title of a data source list should be specified as a property for a web part instance.
The web part and the extension share the logic for pdf file generation.