MARKETPLACE
PLUGINS
BUBBLE HTML2JSPDF
Bubble HTML2jsPDF logo

Bubble HTML2jsPDF

Published September 2024
   •    Updated this week

Plugin details

Generate searchable, print-ready PDFs from any HTML element in your Bubble app.
Unlike screenshot-based PDF tools, this plugin embeds a real text layer over the rendered page, so the output is fully selectable, copy-pasteable and searchable (Ctrl+F) - and readable by document management and indexing systems without OCR.

Before capturing, your content is reflowed to actual paper width, so the PDF matches the printed page instead of the visitor's browser window. Page breaks are calculated from measured text lines and block boundaries, so rows, paragraphs and images are never sliced in half. You can also force or prevent breaks with standard CSS.

Choose page size (A0-A6, Letter, Legal, Tabloid), orientation, margins, units and render scale up to 4x for sharp printing. Hide elements before generating, then download the file, save it to Bubble's File Manager, or both.

Free

For everyone

No ratings yet
100 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

DazeGo logo
DazeGo
Joined 2022   •   1 Plugin
View contributor profile

Instructions

SETUP 1. Enable "Expose the option to add an ID attribute to HTML elements" in Settings > General.
2. Place the HTML 2 jsPDF element anywhere on your page (it is invisible at runtime).
3. Give the element you want to capture an ID, e.g. "invoice".
4. In a workflow, add Element Actions > Generate PDF Content and set Element ID to that ID.

KEY FIELDS
Element ID       ID of the element to capture. Required.
Give FileName    Filename without ".pdf".
Page Format      a0-a6, letter, legal, tabloid.
Orientation      Portrait or Landscape. Use Landscape for wide tables.
Margin / Unit    Margin applied to all four sides, in the chosen unit (mm, cm, in, pt, px).
Scale            Render quality. 1 = 96dpi, 3 = 288dpi (recommended for print).
Image Format     png keeps text edges sharp. jpeg or webp produce smaller files.
Elements To Hide Comma-separated element IDs to exclude.
Download PDF     Download the file in the browser.
Save to File Manager  Upload to Bubble and publish the PDF URL state.
Timeout          Milliseconds before the run is abandoned. Raise for long documents.

CONTROLLING PAGE BREAKS
Add a style tag to your page's HTML header, targeting element IDs:

 <style>
   #section2   { break-before: page; }  /* start a new page here */
   #totalsbox  { break-inside: avoid; } /* never split this block */
   #pagefooter { display: none; }       /* exclude from the PDF */
 </style>

These properties have no effect on screen - only in the generated PDF.
The element must be inside the element being captured.
A block taller than one page will still be split, as it cannot fit.

STATES AND EVENTS
Status      Progress text during generation.
Check Error Error message if generation fails.
Page Count  Number of pages produced.
Filename    Filename used.
PDF URL     File Manager URL, after upload.
Events: PDF File Uploaded, PDF Generation Failed.

NOTES
- Images must be served with CORS headers to appear in the PDF. Images on
 Bubble's own CDN are not, so exclude headers and logos, or host them
 elsewhere. Text and styling are unaffected.
- Higher Scale and png produce larger files. For long documents, try Scale 2
 or jpeg if size matters more than print sharpness.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
PDF   •   Productivity   •   Media   •   Image   •   Data (things)   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (0.0)

Aweful
July 27th, 2025
It generates completely useless PDFs, doesn't honor page size, DPI etc. The output is terribly pixelated and oversized.
Bubble