As Team Manager of the best Sharepoint team and forever SharePoint Dev :), we’ve always been looking to develop the next cool feature on top of SharePoint. One of the cases that people have always been trying to do, is to Print a SharePoint page OOB.

This actually seems to be the case since there are lots of people requesting this feature on Office365 User Voice – https://office365.uservoice.com/forums/264636-general/suggestions/32265421-printing-directly-from-sharepoint-online-please

Ok then… Challenge Accepted. 🙂

Yes… we did a SharePoint Framework Extension where you are able to export the current page to either PDF or PNG.

Frameworks Recipe

Mixing it all together

First of all, you should by now, know how to develop a SharePoint Framework Extension. If not the guys from PnP have great samples so you can start exploring here.

Ok. Now we have our solution ready to develop.

First we declare my FloatingButton to have 2 buttons. One to export PDF, and another to export to PNG.

Now, if you decide to create a simple PNG from the page, you have to know that in Modern Experience there is a div that displays only the content of the canvas. It is called: spPageCanvasContent.

With this in mind, you can now use html2canvas to convert the page html to canvas and then to a base64 dataUrl. After that you just have to open this image in a new url.

This should be the result for a PNG.

Export to PNG

But… if you want to export it to PDF, this is a little bit trickier. Now that you the PNG, what you have to do, it is to “paste” it on a PDF page. But have in mind, that you will need to know the size of the image so it does not become distorted.

And this should be the end result for a PDF.

Export to PDF

Hey, but SharePoint does content lazy loading…

Yep, that is right. So we did a trick! Probably not the most fancy way to do it, but it works! We just scroll the div down until everything is loaded.

What about Responsive?

Yeah… it works too! 🙂

Export to PDF Responsive

Conclusion

With SPFx there are a lot of new tools and technologies that we can use for SharePoint development, creating great and modern user experiences.

We don’t always need start from scratch.

Please find the code and the installation package on DevScopeNinjas GitHub:
https://github.com/devscopeninjas/dvs-spfx-extensions

If you have any comments or suggestions leave them down below in the comments box!

Sharing is caring!


3 Comments

Michaël Maillot · March 12, 2019 at 9:10 am

Hi,

that’s a great feature, thanks ! I was wondering if this was working with PowerApps integrated forms ? 🙂

    Ricardo Calejo · March 12, 2019 at 10:27 am

    Hello Michael,

    Thank you for your comment!
    We believe not. But it is a good thing that we can try to do… follow us, and we’ll let you know 🙂

SharePoint Dev Weekly - Episode 29 - Office 365 Developer Blog · March 5, 2019 at 9:43 am

[…] Printing Modern Experience SharePoint Page – Ricardo Calejo (DevScope) […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: