Services Plugins FAQs

Page Breaks in PDF Converter

#1

Hey team - I downloaded the Bubble Page to PDF Converter plugin and it has been really great so far. However, I have a use case where I’d like my users to be able to dynamically define page breaks, as they sometimes overflow at inconvenient slots.

The following don’t work because the plugin isn’t actually defining page breaks per-se (it’s defining which elements to print on an individual page, not where to place a break within the page.

  1. Defining page brakes dynamically via allowing users to place draggable page break elements
  2. using JS to inject html elements to the dom at user-selected locations, or defined element wrappers

I appreciate the current plugin functionality is a great solution for many use cases. Unfortunately, in my app this will not work, given users dynamically update content, formatting, rearrange elements etc.

I’m also not very familiar with Skia’s skPDF backend that y’all appear to be using. The public API doesn’t have any meaningful documentation I could find on defining page breaks. So, I’m curious if you are either aware of any way that I can can force page breaks at individual points in my document, or any creative solutions other bubble users have developed.

Some other thoughts I’ve had on a possible work-around, but haven’t really worked through yet:

  1. somehow building out dynamic html wrappers that are intended to represent each page, which i could both visualize for the customer, and then feed to the PDF converter. (though i haven’t figured out how to get bubble to mimic continuous individual pages
  2. traditional pagination (i don’t think this will work because only 1 page would be visible at a time)
  3. Some sort of option to set breaks by pixel offsets (i.e.1056 px from top of page, which I could then set up to be adjustable)
  4. Creative use of user-controlled element margins, perhaps?
  5. some way to permit users to define and print dynamic groupings of elements to different iframes before PDF conversion
  6. etc… :man_shrugging:

I’ve never worked with skia or similar PDF apis before, so pardon if these ideas make no sense. just trying to see if there are any pathways to explore.

Thanks & welcome your ideas please :pray:
Dan

#2

Hello @dan10,

Thank you for reaching out to us.

I’ll address each of your questions in turn.

Regarding defining page breaks and other settings dynamically within the action, you can indeed assign both static and dynamic values to them.

For the Pagebreaking functionality, you need to specify the ID Attributes of the groups you wish to print. For instance, you could set up 3 groups, assign them fixed heights, set the desired margins and padding, and then use their IDs in the page breaker to ensure the PDF looks as intended. This is merely one approach; you are encouraged to explore other solutions that might better suit your needs.

Concerning your question about “using JS to inject HTML elements into the DOM at user-selected locations or defined element wrappers,” it is indeed possible to inject HTML code or JavaScript using a simple Bubble HTML element or a custom plugin.

In terms of pagination and HTML wrappers, the plugin offers a header and footer template where you can incorporate HTML code for your design. Our documentation includes example on setting up basic pagination.

Regarding your other inquiries:

These scenarios might be achievable using Bubble’s functionalities. You’re encouraged to explore the plugin’s capabilities and consult our documentation and demo page or search for similar use cases on forums.

Thank you once again. If you encounter any issues with the plugin, please do not hesitate to inform us.

Wishing you a fantastic week ahead!

Best regards,
Stefan

#3

Thanks for the response, @Stephan. I believe I was a bit unclear with my question, so please allow me to try again.

The issue:

  • The Zeroqode PDF converter handles page breaks by having the a user define all elements that should be printed on their own page, then compiles those individual pages as a single PDF file.

  • I am looking for help identifying the best way to either prevent certain element groupings from being split across pages, or allow users to dynamically insert an actual page break (a location on the document, rather than defining what specific elements go onto each page.

Example Use Case:

The following document is completely customizable by the user, and consists of many bubble/div elements that can be added, subtracted, rearranged, contain different content, etc.

  • Each element contains custom content, so no two users will likely have the same arrangement of elements, nor will the elements be the same size.
  • With the Zeroqode/Skia page break solution, the only way to force a page break between the “Additional Credentials” block and the “Experience” block, appears to be by either manually or programmatically defining “Page1” and “page2”… “pageN…” elements that are used to grouping the elements each individual users would like to see on each page.

Issue Reasons
This is not an elegant solution because:
++ Elements are (very) dynamic, and highly nested
++ Elements will not be on the same page for each document
++ There are times when a user would be okay with certain elements split across pages, and other times when they are not.
+++ Example: If the “experience” block were to start mid-page for some user, I would not want to force it to start a new page there, because it would leave a very unprofessional amount of white space on the first page.
++ Ultimately, I believe users would want to avoid widows and orphans. which could happen within individual element blocks, and there are far too many nested elements to manage this with the current system

Ideal Solution
I would like to know if there is a way to do one of the following (or similar):

  1. I generate the document and present it in an iFrame to the user (plugin does this well, no problems here), But then the user is able to edit (drag/drop) the page breaks (the grey space between pages) within the PDF output to make adjustments before downloading or sharing.

or

  1. within the bubble UI and before generating the PDF, users are able to draggable individual “marker” element that tells the conversion system, "when you see this element, start a new page and continue with all other elements
    ++ Note: i can easily create this UI within bubble, that’s not the issue, I’m just saying i don’t have a way to define true page break marker, (“Start New Page” markers, versus explicitly telling the Zeroquote plugin which elements go on each individual page, which again is not an appropriate solution because of the dynamic nature of the docs they are creating)

image
image515×835 107 KB

#4

Okay - I did some reading on what a pain in the ass PDFs are to work with & edit to define page breaks, and I’m guessing there’s not much you can do within the skia API to change some of it’s limitations.

But I think i’ve got a workable solution. I’ll set up the default to output to a PDF page that is equal to my source element’s height & width in px. I’ll define this element’s sizing to be equivalents to letter & A4 sizing, assuming 96dpi. Effectively, i think this should give me a “pageless” solution that will work for 99% of my users, since I don’t expect many will actually print them.

Feel free to close this ticket, but please let me know if you do have any better ideas how to handle.

#5

Hello @dan10,

Thank you for your message and for providing details about your request and use-case.

After further consultation with our development team, I’d like to clarify that we are not utilizing Skia’s skPDF in our plugin. Instead, we’ve developed our own backend specifically for this purpose and are not incorporating third-party APIs into it.

Regarding the page breakers, we’ve taken your request into consideration. However, our current backend architecture requires specifying the ID group for the page, and at this moment, it does not support specifying a page break in the manner you’ve described.

I’m also pleased to hear that your last workaround was successful, and you’ve managed to find a solution. Should you encounter any further issues or have any misunderstandings with the plugin, please don’t hesitate to reach out. :pray:

We appreciate your understanding and cooperation.

Wishing you a fantastic day ahead!

Best regards,
Stefan