Page & Element PDF Creator
FreeExport your page or any element with and ID to PDF. Customize format, orientation, among other things.
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]
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]
[h3][b]Page to PDF[/b][/h3] Convert whole visible page into a PDF.
[h3]Path parameters[/h3] [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]Filename:[/b] Name of the file to download. Don't include .pdf extension.[/li][li indent=0 align=left][b]Margin:[/b] Margin set in inches to the pdf. [i]Default is 0.3[/i][/li][/ul][/ml] [quote][color=rgb(136, 136, 136)]After running this action a PDF will be downloaded to local storage.[/color][/quote]
[h3][b]Element To PDF[/b][/h3] Convert any given element defined by unique ID into a PDF.
[h3]Path parameters[/h3] [ml][ul][li indent=0 align=left][b]Element ID:[/b] ID of element that will be converted to PDF.[/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]Filename:[/b] Name of the file to download. Don't include .pdf extension.[/li][li indent=0 align=left][b]Margin:[/b] Margin set in inches to the pdf. [i]Default is 0.3[/i][/li][/ul][/ml][i][/i] [quote][color=rgb(136, 136, 136)]After running this action a PDF will be downloaded to local storage.[/color][/quote]
[h3][b]Element to Image[/b][/h3] Convert any given element defined by unique ID into a Image.
[h3]Path parameters[/h3] [ml][ul][li indent=0 align=left][b]Element ID: [/b]ID of element that will be converted to Image.[/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]Filename: [/b]Name of the image that will be downloaded.[/li][/ul][/ml] [h3][b]Create a PDF[/b][/h3] Create a pdf from scratch with code.
[h3]Path parameters[/h3] [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]Filename: [/b]Name of the file to download. Don't include .pdf extension.[/li][li indent=0 align=left][b]Code:[/b] Create and personalize your PDF as you like. With methods such as:[/li][ul data=1][li indent=1 align=left]addPage()[/li][li indent=1 align=left]addImage()[/li][li indent=1 align=left]addLine()[/li][li indent=1 align=left]addText()[/li][li indent=1 align=left]setFontSize()[/li][li indent=1 align=left]setTextColor[/li][/ul][li indent=0 align=left]and many more. Cutomize this PDF with static or dynamic content. Check [color=rgb(0, 102, 204)][url=https://rawgit.com/MrRio/jsPDF/master/docs/index.html]documentation[/url][/color] for more help[/li][/ul][/ml] [h3][b]Get A PDF As Object[/b][/h3] Returns a url of the PDF stored in S3. Use this to store in database, or to share file in social networks.