Applying the plugin to your bubble app is simple. You only need to place the plugin element on your page and call in the workflow the action "Convert to PDF" (or Convert to PDF V 2.0).
The plugin contains Convertor to PDF v2 visual element which should be used on page. Also plugin contains (legacy) elements used for previous version Convert to PDF and Page Breaker. Click here, to see previous version setup.
Available on both plugin elements:
Element - is a default setting to link your plugin to the action. You can pace multiple PDF converters on the page and then connect one of them using this field.
Convert target - you can choose to export or the whole page, or just an element with a specific ID.
Element ID - if in the Convert Target drop-down you set the value 'single element' - enter here this element's ID.
Ignored elements ID - PDF plugin takes into consideration all Elements, that holds any of the ID listed here (separated by comma), and ignore these when generating the PDF.
Upload the PDF to AWS - if you check this field the file will be saved in the File Manager in Bubble.
Download PDF after converting - whenever checked, the PDF file will automatically start the download to a user's PC.
Output file name - custom resulting PDF filename.
Orientation - defines the PDF page orientation (landscape or portrait).
Units - the field is working with custom form parameter, which means the units of measure for the PDF page.
Format/Target Format - the size of the generated page. You can choose any of the normalized formats or 'custom format' if you want one personalization.
Custom page size (Custom Target Format/Custom Format) - this field is used only if you previously selected the "Custom Format", In any other case, it will be ignored. Set the width and height by separating them with a comma (1300, 840).
Rotation (degrees) - you can rotate the document if needed, setting the clockwise direction in degrees.
Compress - you can compress the final PDF file, to make it lighter.
Only for the old element:
X - Y Indent - specifies the distance from the top left corner in pixels. * to set the distance also from right and bottom, you should set the custom format and reduce the final width/height by needed units [specified in field "units"].
Source Format - you can choose one of two options here. Or you will let the plugin deduct the source automatically, or you will set your own dimensions.
Source Width/Height - this field will be ignored if you choose the "Auto Detect" as a Format. If you set the "custom" option, you will have to write the size of your decided source. * This is helpful if you need only a part of the element. Let's say, that you have a group of a width 600px, that has on the left side some text of width 400px and on the right image of size 200px. You want to print only the text part. Then you will set a custom width of 400px and everything outside will be ignored.
Break content into pages - If checked, the document will be divided into pages, but the way you have set the page Target Format. If the content of your page does not fit the chosen Target Format, your pages will be cut not into equal parts.
Only for the new element:
Top\Bottom\Left\Right Padding - set these fields to the desired spaces
Pagebreak IDs - if you want to print items on different pages, then give them all an ID, and put the IDs in this field. For example, I have three groups that I want to put on different pages. I need to assign the ID parameter to each and then indicate those group IDs into the Pagebreak IDs field. Note: use the correct format, as shown in the example below:
We made a major plugin update, the latest release comes with the following list of features/fixes/changes:
fixed PNG/SVG issues (present on preview, disappear on the converted file);
fixed CORS conflicts with the plugin;
fixed "letter"/"governmental-letter" Formats;
fixed other small bugs;
added a new plugin element (Convert to PDF V 2.0);
the Pagebreaker element was removed from the latest plugin version.
For more details, please check the demo page setup (Popup with 5 pages): https://bubble.io/page?type=page&name=page-to-pdf&id=zeroqode-demo-01&tab=tabs-2
The example has the main repeating group, which has the exact dimension of the PDF page in A4 format, and inside it another repeating group that holds reports divided into these pages.
We have prepared two data tables where one data table is the leading table, that holds exampled promotional content, that you may want to print into the PDF file, to keep your promotions visible. In the second datatable, we have some example report, that actually needs to be delivered to your clients.
These four elements play a critical role to make it work. First, we need to set custom input. (You can use states or any other method. We used to input in the example, to make it more accessible/visible).
As we want to display only those pages that hold reports and avoid generating empty pages, we use this input to calculate how many rows will have our master repeating group following the next rule:
Search for pdf_demo_datas:count / 10:ceiling
Then we settled the master repeating group, so it shows the only number of rows as specified in the previous input, following the next rule:
Search for pdf_demos:items until #Input pages's value:items until #Input pages's value
Each of these rows will display our promo materials (images, text and so), but it also contains referral input deciding the current page in PDF editor and also the starting item to display in the inner repeating group:
Current cell's index * 10 - 9
The final report will display only rows 10 rows from report data, starting from the value decided by previous input.
Search for pdf_demo_datas:items from #Input with index's value:items until #10
If you have a page with multiple pages inside and want to convert them equally in the PDF file, you need to use carefully the Target Format, Custom Target Format, Source Format, Source Width/Height, and your page parameters (w/h).
For example: imagine that you have a test page with 2 groups, which you want to convert as 2 pages inside the PDF file. Your page w/h parameters are 1010/1410 px:
The groups are set with the same size - 905w/650h px:
To convert this page and on the output get the PDF file with 2 equal pages, you need to set the plugin action as follows:
Here we present an example of how to correctly setup the workflow action on Button click:
Set the event for a Button element in click
2. Add in Step 1 , action Convert to PDF v2. Please be sure to set your custom target page dimension properly for best result. (i.e: Unit, Orientatio, Format, Padding etc)
3. For Step 2, choose action to add a pause (t=1s) 4. For last step use Reset Inputs to reset any value for these type of elements.
Update: 08/14/2019 -
We made an update to the plugin, the latest release comes with new feature and fixes/changes:
Pages padding, added new field Bottom Padding (in pixels).
Fixed Top Padding that worked only for the first page.
Name change for propriety X indent -> Left Padding
Name change for propriety Y indent -> Top Padding
Note: The latest implementation will work only with the following proprieties settings: The Target Format should be set to Custom format The Source Format should be set to Auto-detect
Update: 08/02/2021 –
Fixed problem with rendering Arabic alphabet
Update: 12/03/2021 -
fixed problem with an empty value (1.46.0)
Update: 14/03/2021 -
cors improvement for SVG files (1.47.0)