How to convert Bubble Page into PDF? How to merge multiple PDFs in Bubble?

Suppose there is a form that has multiple PDF files as an attachment and now you want to convert that form which is a bubble page with dynamic data coming from the database into a PDF and then merge those attachment PDF files into One PDF file and serve it to the user who wants to download the whole form. How to do that? you may wonder. After reading this article, you will know how.

Step 1: Create a page that you would like to convert into PDF with all the attachments.

Here, for example, I have created one which I am showing you in the image

In case, you want to know how to prevent file-uploader from uploading any file other than PDF, here is the article that might help: https://anishgandhi.com/how-to-restrict-file-types-in-multi-file-uploader-in-bubble-no-codeno-paid-plugins

Step 2: Install the 'Bubble Page to PDF converter' plugin by Zeroqode

Yes, this is a paid plugin that you can install on a subscription base or one-time purchase base. Here is the plugin link: https://bubble.io/plugin/bubble-page-to-pdf-converter-1526888373861x305666508856229900

Step 3: Configure 'Bubble Page to PDF converter' plugin

Once you install this plugin, place the element named 'converter to pdf' on this page

Now make file uploads enabled as 'yes' and restrict the max file size up to 50 MB.

you can increase the max file size if you want.

As you can see on the page (Image 1), there is form data and then there are 2 PDF files, a multifile uploader, and a download button.

On the Download button click, create an action 'Generate PDF ConvertertoPDF A'. This action you will find after the plugin installation only.

Now let's configure this action

• Convert target is an interesting aspect. It has 3 options:
  1. Current Page (With Floating Group): If there is a floating group header or any Floating group, it will be downloaded as a PDF too. I generally don't recommend this.

  2. Current Page (Without Floating Group): This will convert the whole page into a PDF but no Floating Group will be covered.

  3. Single Element: Suppose there is one group of the page that only you want to convert into PDF. Then choose this option and place the ID below which is the same as the ID attribute of that group. This option will remove unnecessary page height if there is any and only the group's height will be covered in PDF creation.

• The most important and most beautiful aspect is 'Ignored Elements ID':

  • On the example page (Image 1) I created, I do not want those uploaded files to be added in PDF because I will merge those files with the generated PDF later. Other than that, I don't want that multi-file uploader element and Download button in this generated PDF.

  • On all those elements that I don't want to be added in the generated PDF, I will provide an ID attribute the same as Ignored Elements ID which in this case is 'ignore'.

You can set the height of the header and footer as well as padding from left, right, top, and bottom.

3 more important things here that are important to configure

1. Output file name: Here you provide the name of the PDF file that will be converted from the page.

2. Upload file to AWS: Checking this will save the converted file into file manager of your bubble app.

3. Auto save PDF: Checking this will download PDF in the user's browser.

Here I am checking the Upload file to AWS but not Auto save because I don't want this to be downloaded but to be saved so I can merge it later.

Step 4: Merge generated PDFs with Uploaded PDFs

For this Install plugin named 'PDF Merger [FREE; no external APIs]' that is a Free plugin. Here is the plugin link: https://bubble.io/plugin/pdf-merger-[free-no-external-apis]-1609526031530x543107610613383200

Place the element named 'PDFDocumentMerger' on the page

Here is how you configure it:

Now, Create an Element event named 'ConvertertoPDF Uploading to AWS is finished' and its action named 'Merge One PDF and a List of PDFs using PDFDocumentMerger' to configure it as shown below:

This action will take one File and a list of other files to merge them and give a single file as output. One file in our case in Bubble Page to PDF converted file and list of files will be uploaded files by users. You can provide a filename as you desire.

Do you think this is over? Just one last thing:

Install a plugin named 'Base64 File Uploader & Downloader'. It is a free plugin. Here is the plugin link: https://bubble.io/plugin/base64-file-uploader--downloader-1563788967815x673444000197247000

Now Create one event named 'PDFDocumentMerger has finished merging' and an action named 'File - Download Direct' and configure it like shown in the image below to download the merged file when merging is over.

Make sure to give a .pdf extension at the end of the file name.

Help me!

If you enjoyed this post and found it helpful, Kindly consider supporting my work by buying me a coffee! Your support helps me create more valuable content and continue sharing useful resources. Thank you!