1.Install the plugin and add the "PDF Converter" element on your page
2.Set an ID for the element you want to export. To export the whole page, use this special selector: .main-page.
3.From your Workflow, Call the "Convert" action:
Element(s) to capture
One or more comma-separated selectors. Each element will be exported to a separate page in the PDF document.
You can use any valid CSS selector (#eltID, .eltClassname, img etc). Use this special selector to export the entire Bubble page: .main-page
Save to file
Whether the generated file will be saved into a file and downloaded automatically
If "yes", the PDF file will be uploaded to Bubble filestorage
Output filename. Do not add ".pdf" at the end
Compress quality is a number in range [0..100]. It defines the output file size and quality
Predefined commonly used page formats
Page orientation (Portrait, Landscape)
Page fit mode
How the captured element will be rendered into the PDF page. Possible values are: fill, contain, scale-down, cover, none. Check the detailed description below
No page breaks mode
Applies to "full-width" mode only
Margins (left, right, top, bottom)
Inches, Centimetres, Pixels, Points etc
Custom Page Size
Custom page size
Set to "yes" if you want to define custom page format
Custom page size. Format: width,height. "Custom page size" field must be set to "yes".
Units for the custom page size: Inches, Centimetres, Pixels, Points etc
Automatically show the print dialog when file opened
Draw margin borders
Draw red borders to indicate the margins. For debug purposes
Setting this field to Yes is particularly useful when your page contains images from external resources. Hint: set this field to Yes when the output PDF misses some images.
Helps to decrease the output filesize. Useful to do before generating a URL
Filename without ".zip". Example: "output"
PDF Generating (Yes/No)
PDF Generation Percentage (Number)
➡️ Page fit options
Page fit defines how the captured element will be rendered on the PDF page. Plugin supports 6 options: full-width, fill, contain, scale-down, cover, none. It works in the same way as the object-fit CSS attribute (check the CSS Demo section for a better undertanding).
If you are unsure about which option you have to choose, start from full-width or ontain.
➡️ How to upload PDF and generate a URL
1.Set the "Generate URL" field to "Yes"
2. Once the "URL generated" event triggers:
3. Access the "URL" shared state:
Now you can save the generated URL to database etc
Sometimes it's useful to archive the PDF before generating an URL to highly reduce the filesize. Set the "Create archive" to "YES" and optionally the "Archive filename" fields.