One of the main feature of the app we want to create is to be able to generate beautiful custom PDFs and I am struggling with all the different plugins that exist. I wanted the result of my benchmark on pdf plugins and get advice on which option to choose.
Here is the page that contains the preview of the pdf we would like to generate:
From what I saw, there are 4 main options for generating pdf :
PDF conjurer plugin. This option seems really powerful but seems to have strong limitations: it’s really hard to create the layout we want using workflow and therefore not very flexible if we want to change it, we can’t choose the font.
HTML to PDF ([this plugin](HTML to PDF Plugin | Bubble, and this one). This option seems to be the most interesting to me be those plugins do not seem very well documented and I was not able to have images in the document.
Using paid subscription API (docspring, html2pdf rocket, selectpdf) : is probably a good solution but those providers are really expensive.
Using plugins that seem to convert a bubble page into pdf (this plugin and this one for example.) I’m not sure this option would work in my case because you can see in the screenshot above that I don’t want to print the entire page, only the invoice part. Maybe I could have another dedicated page in my bubble app which will only include the invoice part but could it be filed dynamically when the user clicks on the download button?
If anyone has gone through the same reflection before, I would love to get advice on this! Thank you
One semi-native (no plug-ins needed, but with a call to an external JS library) way is to add an HTML element and create your invoice or document template with HTML+dynamic data in the element. Then you can add a script tag to that same element, and in the script tag, load the PrintJS library from here: https://printjs.crabbly.com/
They have a CDN link, and you can point the src in the script tag to that CDN link.
<script src="CDN link"></script>
Then, you can just add a button in the HTML element, to invoke the print function, and the library allows you to select an element by HTML id for printing as PDF. You can just wrap the part to be printed in a section tag and give it whatever id you want. Replace element-id with that section id (or any HTML id within that HTML element).
For styling, you can add whatever style and fonts you want using style tags in that same HTML element.
It worked pretty well for me, as long as everything is placed in the same HTML element.
It didn’t work if I tried to print using an HTML attribute added via Bubble (if you don’t know what that is, ignore it. There is a way to add HTML IDs to any Bubble element, and I could get the print service to print Bubble elements using that id, but the formatting gets mushed up, and doesn’t print wysiwyg from Bubble. If that had worked, it would have been much easier than the way outlined above, because no HTML building would be needed).
Hat-tip to @vini_brito for inspiring this by suggesting the PrintJS library in another post
