All Plugins
Page & Element PDF Creator
Free
Export your page or any element with and ID to PDF. Customize format, orientation, among other things.
About
This plugin works on the client-side, without any external API or subscription. Just click, download, create or store any PDF. This plugin is capable to export either the whole page or just a single element referenced by its ID into all known formats like A4, B5. You can also adjust the orientation of the PDF (portrait or landscape). Features: [ml][ul][li indent=0 align=left]Return the PDF as a Bubble File (you can store it in database, download it or manipulate as you wish)[/li][li indent=0 align=left]Create a PDF from zero. With a few lines of code, you can edit a pdf as you wish. Add lines, text, circles, images and position them as you wish. Full control.[/li][li indent=0 align=left]Create a PDF from an element[/li][li indent=0 align=left]Create a PDF from whole page and all it's visible elements[/li][li indent=0 align=left]Create an Image (png, jpeg) from an element [/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Expose the HTML ID attribute.[/li][li indent=0 align=left]Give the element that will be rendered into a PDF an ID (e.g element_to_pdf). [/li][li indent=0 align=left]In the Workflow create a new Action and search under the Plugin Tab for [i]Element To PDF[/i].[/li][ol data=1][li indent=1 align=left]If you want the whole page to PDF, just search the action [i]Page to PDF[/i] and set your desired settings. [/li][li indent=1 align=left]If you want to store the PDF in the database, you need to add the PDF Object element into your Editor. Fill the inputs with your requirements. Then go to Workflow -> and add action [i]Get[/i] [i]a[/i] [i]PDF Object[/i]. Lastly you will need to create a new Event [i]PDFObject PDF is ready[/i] and then you can manipulate the PDF. [/li][/ol][li indent=0 align=left]Set orientation, format, filename and margins (for example portrait, a4, mypdf, 0)[/li][li indent=0 align=left]Run the action and the PDF will be downloaded into local storage[/li][/ol][/ml]
Full Documentation
[h3][u]Elements[/u][/h3] [ml][ol][li indent=0 align=left]PDF Object[/li][/ol][/ml] [h3][u]Events[/u][/h3] [ml][ol][li indent=0 align=left]A PDF Object Is Ready[/li][/ol][/ml] [h3][u]Actions[/u][/h3] [ml][ol][li indent=0 align=left]Page to PDF[/li][li indent=0 align=left]Element to PDF[/li][li indent=0 align=left]Element to Image[/li][li indent=0 align=left]Create PDF[/li][li indent=0 align=left]Get A PDF as Object[/li][/ol][/ml]
[h3][b]PDF Object[/b][/h3] Element that will return a pdf.
[h3]Fields[/h3] [ml][ul][li indent=0 align=left][b]Element ID:[/b] ID of element that will be converted to PDF. Leave blank if you want to download complete page.[/li][/ul][/ml][quote][color=rgb(187, 187, 187)]The ID global attribute defines an identifier (ID) which must be unique in the whole document as defined by [/color][color=rgb(102, 163, 224)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]Mozilla[/url][/color][/quote]
[ml][ul][li indent=0 align=left][b]Orientation:[/b] orientation of the pdf. Possible values are "portrait" or "landscape". [i]Default is portrait[/i][/li][li indent=0 align=left][b]Format:[/b] the format of the pdf page. Can be: "a0 - a10", "b0 - b10", "c0 - c10", "dl", "letter", "government-letter", "legal", "junior-legal", "ledger", "tabloid", or "credit-card". [i]Default is a4[/i][/li][li indent=0 align=left][b]Margins:[/b] adjust your element in the page. Only numbers are valid. [i]Default is 0 [/i][/li][li indent=0 align=left][b]filename: [/b]name of the file to download. Don't include extension .pdf[/li][/ul][/ml] [h3]Exposed States[/h3] [ml][ul][li indent=0 align=left][b]pdf:[/b] the PDF that you generated can be accesed with this state. This will be returned after you run [i]Get PDF Object[/i].[/li][li indent=0 align=left][b]filename:[/b] the name of the file can be accesed with this state.[/li][/ul][/ml] [h3][b]A PDF Object Is Ready[/b][/h3] Event that will handle the PDF convertion. [quote][color=rgb(136, 136, 136)]Use this event in the Workflow to add an action to use the PDF[/color][/quote]