Plugins
Templates

Bubble Page to PDF Converter Plugin

This plugin will help you generate a PDF of the desired data so that you can share it with other users of your platform and save the created file in the database quickly and easily.

Link to plugin page: https://zeroqode.com/plugin/bubble-page-to-pdf-converter-1528878356625x811358995289735200

Introduction

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).

Plugin element proprieties

The plugin contains Converter to PDF v2 visual element which should be used on the page. Also, the plugin contains (legacy) elements used for the previous version Convert to PDF and Page Breaker. Click here, to see the 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 hold 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 the customs 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:

Important: the plugin may not be able to work with other plugins that have media files. This problem is caused by the CORS browser policy (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). As per the fact, the plugin is not an integrated part of the Bubble, it does not have the right to access other plugin's media files. If you encounter this problem with the group you want to convert to PDF, try using only Bubble components or exclude from the group component of other plugins, to find out which exact element is not giving you the access.

Update 19/06/21

New Action - Generate pdf from html server side ConvertortoPDFv2.0 A (for Convertor to PDF v2 element)

  • Element - the plugin element that will perform the action.

  • Convert target - export the whole page or just an element with a specific ID.

  • Output file name - Custom Filename.

  • Element ID - If in the field above it is set 'single element' enter its ID here.

  • Units - the field is working with the custom form parameter, which means the units of measure for the pdf page.

  • Orientation - Defines the PDF page orientation (landscape or portrait).

  • Ignored elements ID - plugin ignores all the elements whose IDs are specified in this field when generating the PDF.

  • Upload File to AWS - when the checkbox is checked, it means the file will be saved in the file manager in Bubble.

  • AutoSave to PDF after converting - when the checkbox is checked the PDF file will be automatically downloaded to a user's PC.

  • Format - generated page size. Choose any standard formats or set the "custom format ".

  • Custom Format - This field is used only if it was previously selected as the "custom format". In any other case, it will be ignored. Set the width and height by separating them with a comma (1300, 840);

  • Top\Bottom\Left\Right Padding - set these fields to the desired padding.

  • Pagebreak IDs - Elements IDs that are going to be printed on different pages. For instance, three groups should be print on different pages. Specify these group IDS in this field. Set Header and Footer Header Height - Height Header Template - HTML template for the print header. For example, would generate a span containing the title. Footer Height - Height Height footer - HTML template for the print footer. For example, would generate a span containing the title.

PAGE BREAK option is currently in development mode for New Action.

Update 10/05/2020

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.

Note: New plugin element works with a bit different settings, than the old one. For more details (how to set up the plugin using a new element) - please check our updated demo page.

The page breaking logic was changed - we have removed the Pagebreaker element from the latest version. Now, if you want to get several pages of the equal size and format, you need to lease the content of your page into separate groups and indicate these group IDs in the Pagebreak IDs field.

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

Example of application setup

The following link will show how we have settled the example of using repeating groups, headers, and footers: https://bubble.is/page?type=page&name=pdf_generator&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.

Setting up data:

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

Example of the plugin usage with the old version/element

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:

Page w/h = Source w/h

The groups are set with the same size - 905w/650h px:

group w/h = Custom Target Format = your single page parameters

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:

Element, Convert Target, Download PDF after converting, Orientation
Unit, Target Format, Custom Target Format, Source Format, Source w/h

Workflow example

Here we present an example of how to correctly set up the workflow action on Button click:

  1. 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 the best result. (i.e: Unit, Orientation, Format, Padding, etc.)

3. For Step 2, choose action to add a pause (t=1s) 4. For the last step use Reset Inputs to reset any value for these types of elements.

Changelogs

Update: 08/14/2019 -

We made an update to the plugin, the latest release comes with new features 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)

Update: 19/06/21 - Version: 1.50.0 (A better PDF quality!)

  • add a new action generate pdf on the server-side.

Fix: 14/07/2021 - Version 1.51.0

  • improved the method of saving URL

Update: 16/09/2021 - Version 1.55

  • the fields responsible for the margin (the default values were added to the Padding fields in the new server-side action)

Demo Preview the settings