I’m using the SelectPDF plugin and whilst it does actually produce PDF pages, it’s really quite challenging to do some things that are pretty much taken for granted when working with PDF generators normally. In particular:
Headers and Footers. It would be great to be able to specify headers and footers, and have them different for the first page and subsequent pages.
Page numbering. It would be really nice to be able to put in placeholder text for page numbers and have them replaced. Also total page count. (“Page 3 of 10”).
Control of page breaks. SelectPDF’s talks website talks about how to handle page splits with CSS:
Page Breaks
But as Bubble uses “position:absolute” so much, it’s actually almost impossible to get the Webkit engine to respect this at all, and further to get Blink to respect it at many times.
Repeating Table Headers. Would be great to be able to tell the plugin which element holds my table headers, and have it repeat them across pages. This might be challenging to implement as Bubble doesn’t actually use HTML tables, which I think SelectPDF relies upon.
I believe that many/all of these items are supported by SelectPDF, it’s just that the plugin doesn’t link them nicely to Bubble concepts yet, or expose them at all. Would be great if it did - I just spent 6 hours coding JS to get all the functions that I needed.
Sure - the short answer is that used JavaScript to read the DOM of my page, go through it until it needed a page break, and inserted exactly the right amount of whitespace to allow for the pagebreak.
For headers/footers, I replicated those where they were needed, simply ensuring to place them in exactly the right place on the page so that when it ran through to the PDF maker it all lined up nicely.
It’s a poor man’s solution as it’s sensitive to any changes in the layout engine. Fortunately the old layout engine has predictable results for my usecase (invoices) in SelectPDF’s renderer. Also fortunately, Bubble aren’t going to change the engine any time soon as they are putting all their effort into the new responsive one
If you need more detailed tips do let me know, but as it’s likely to be pretty custom to your use-case I may need to do it on consulting.
It might be that with the new responsive engine there is actually a way to get this to work properly, but I’ve not tried. I guess Bubble is using “position:absolute” a whole lot less if they are using flexbox.
