When you have a News Article published, it is only a matter of time before your users ask you a way to export the article as a PDF. And this is exactly what I was asked by my customer some time back while designing their intranet portal. We have such a big community in the M365 world that I hoped to find some reusable component/article already present. And I was not disappointed. I got following article which I used as a base to develop my component.
My Solution
My solution pivoted around jsPDF, a rich library to work with PDFs, and using this into a SpFx webpart. jsPDF documentation can be found here for more information. You can find the code for this component in my GitHub repo here.
- SpFx Webpart
- jsPDF
While we have an option of generating a PDF document using Power Automate, it was not a feasible solution due to load and licensing cost. Therefore, I went ahead with a React based SpFx SharePoint webpart. The webpart will just show up as “Download” or an icon on the News Article page. On click of the text/icon, I was bundling all the different elements on the page and generating the pdf using jsPDF.
jsPDF has the capability to just take a screen shot of the page and generate the PDF by painting the image on the pdf and exporting it. It also has a way by which you can control how to generate the PDF. You can control each part/section of your pdf. For example, header of the file, its font style and size. If there is an image on the Article page then you can control that as well. We wanted to place it on the top of the page just after the header and publish date followed by the article content as is. While you are writing to the PDF piece by piece, you can also avoid some items that does not make sense to your users. For example, if you have left and right pane with some widgets and content. You can also control the margin, offsets and other details like how these details are painted on the PDF file.
In my case, I was controlling the header, publish date, banner image of the article, and the article content. Painting the article content correctly was not an easy task – when I wrote for the first time on the PDF, I noticed that it was also painting some GUIDs of other webparts available on the page. This was happening because I was grabbing the entire data present in the CanvasContent1 property of the modern page and that had many other webparts. I decided to do it manually, one by one strip them from the page. I used Regex to do that.
Code Details
You can find the entire component in my GitHub repo here. “DownloadArticlePage” class does the initiation to the backend service which takes context to extract page item from pageContext. I am only displaying a button, on click of which backend call to my “ExportService” initiates. Now, I need page item’s details for which I need to call my “SPService” class and pass on the results to my “PDFService” class to do the painting work on a PDF file.
In my code on the GitHub repo, you will find both the methods (print entire page as image and print items on the PDF one by one). “exportItemToPdfAsImage” method does the first work and “generatePdf” does the second work. To run the Regex manipulations on the page content, I have “formatContent” method. To paint the News Article banner, I needed to convert the image to it Base64 format by grabbing its URL. You can find the implementation in the “imageToBase64” method.
Please keep your comments coming. Have a great rest of your day!
If you liked the article, share it with your friends and colleagues. You can also send a “Thank you” note by buying me a coffee. Buy Me a Coffee
