Here's how you can let users generate a PDF with a header in your Bubble app.
December 20, 2023
There are a range of options for creating basic PDFs in your Bubble.io app, but things get a little more difficult when you want to customise your PDFs. This article will demonstrate how to let your users create a PDF with a custom header, using the PDF Creator plugin.
You can install the PDF Creator plugin by navigating to the 'Plugins' tab in your Bubble editor and searching for 'PDF Creator'. Once you've added the plugin, you'll have access to a new visual element in your Bubble editor: the 'PDF Creator' element.
Drop this element anywhere on the page that you're creating the PDF from. While it will be visible in your editor, it won't actually appear for users of your app. Once you've dropped the element on the page, you'll have access to a new workflow action called 'Generate a PDF Creator'.
Link the 'Generate a PDF Creator' action to a button (or some other element in your app). You'll then need to select which elements you want to use in your PDF. Before pick pick the elements we want to PDF, you'll need to expose the option to add an ID attribute to HTML elements. You can do this by navigating to:
Settings -> General -> Advanced Options (at bottom of General tab)
and checking the 'Expose the option to add an ID attribute to HTML elements box.
In the 'Design' tab of your Bubble editor, click on the element you want to PDF. You should see an input field at the bottom of the 'Appearance' tab called 'ID Attribute'. Give your element some sort of unique identifier - in the example below I've given the table element an ID Attribute 'my-table-pdf':
Go back to the workflow you're using the 'Generate a PDF Creator' action and add this ID Attribute to the 'ID Attribute(s)' field. You can also customise the file name, whether you want to automatically download the PDF and save it to your database or not and change the layout of your PDF.
To add a header to your PDF, scroll down to the 'HEADER' section of the 'Generate PDF Creator' action. You'll have the option to add text to both the right and left header sections of your PDF. In the example below, I'm adding 'Cranford Tech' to the left-hand side of the header and linking to the company website on the right-hand side of the header.
Note: If your header is overlapping with the main body then you'll need to set a larger top margin. The top margin field (for the PDF as a whole) is located in the 'LAYOUT OF PDF' section of the 'Generate a PDF Creator' action.
There are options to change the font size and the margins at the top and sides of the header. You can also change the font color of any text you add to the header by changing the 'Font Color' field (located just before the 'Footer' section on the Generate a PDF Creator action).
In order to add a logo to your header, you'll first need to upload an image. Scroll to the 'IMAGE' section of the 'Generate a PDF Creator' workflow action and upload your logo.
You'll then need to set the width and height of the image using the 'Width' and 'Height' inputs. In order to avoid your image losing quality you'll need keep the aspect ratio equal to that of the image you've uploaded. For example, if the image you've uploaded has a width of 240px and a height of 80px, you'll need to input dimensions that have a 3:1 ratio. If you were to set the width to 120px and the height to 80px, you would get a distorted image on your PDF. However, if you set the width to 120px and the height to 40px the image would keep its shape (because the aspect ratio is still 3:1).
Please note the PDF Creator plugin currently supports JPEG and PNG images (not SVG images).
You should now be able to generate a PDF with a logo in the header.
