Demo to preview the settings:
Introduction
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.
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 Generate pdf from HTML server-side.
File uploads enabled - if you want the generated files to be saved in AWS please set this file with "YES".
Tutorial
Plugin element
The plugin comes with one element.
Plugin actions
The plugin element comes with a Generate pdf from HTML server-side action.
Convert PDF ConvertertoPDFv2.0 (Deprecated old action)1. Action “Generate Pdf”
⭐⭐⭐This action was released on 19/06/21 and it was an important plugin improvement that gives the possibility to convert PDF in super high quality.⭐⭐⭐
- Element - the plugin element that will perform the action.
- Convert target - export the whole page or just an element with a specific ID.
- Element ID - If in the field above it is set to a single element' enter its ID here.
- Orientation - Defines the PDF page orientation (landscape or portrait).
- Format - generated page size. Choose any standard format or set the "custom format".
- Units - the field is working with the custom form parameter, which means the units of measure for the pdf page.
- 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);
- Calculate scale from "Custom Format” - calculate a transformation that resizes an element on the paper from "Custom Format”
- Ignored elements ID - plugin ignores all the elements whose IDs are specified in this field when generating the PDF.
- Pagebreak IDs - Elements IDs that are going to be printed on different pages. For instance, three groups should be printed on different pages. Specify these group IDS in this field.
- Page Break Inside Avoid - Put the ID of the elements you want to prevent from being split across two pages when printing. This field does not work for the old responsive layout. If you set this feild id and the element is still cut, it means that the element is too large to fit on a single page.
- Styles for Print - Can define different style for screen and a printer.
- Direction of text - Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
- Top\Bottom\Left\Right Padding - set these fields to the desired padding.
- Header Height - Height.
- Header Template - HTML template for the print header. For example, would generate a span containing the title. The plugin has some standard classes that you can use to display the number of pages, title, and total pages:
date- formatted print date.
title- document title
url- document location
pageNumber- current page number
totalPages- total pages in the document For example, you want to display the number of pages and and total page
For example, if you want to display the number of pages and total page, it needs in the field "Header" to write the following HTML:
<div class="pageNumber"></div>
<div class="bar">/</div>
<div class="totalPages"></div><style>
.pageNumber, .totalPages, .bar{
font-size: 14px;
margin-left: 20px;
}
</style>
Ex:
- Footer Height - Height.
- Height footer - HTML template for the print footer. For example, would generate a span containing the title. Has the same constraints and support for special classes as the header.
- Output file name - Custom Filename.
- Upload File to AWS - when the checkbox is checked, it means the file will be saved in the file manager in Bubble.
- Attach To Type - Type of date
- AutoSave to PDF after converting - when the checkbox is checked the PDF file will be automatically downloaded to a user's PC.
This plugin does not support processing 3D elements in Canvas. Using it for 3D objects or elements may result in limited functionality or unexpected errors. We recommend using dedicated solutions for rendering and manipulating 3D objects.
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
2. Save in S3 Bucket
To use this action, it is necessary to set the Keys in the plugin settings
Setting the keys
- Create an account on the desired Cloud storage which is compatible with the AWS SDK.
- Go to the Access Keys and create a new access key.
example: Created key in Wasabi
- Insert the access key/secret from the plugins tab Access key ID and Secret Access Key.
Endpoint - is one end of a communication channel. When an API interacts with another system, the touchpoints of this communication are considered endpoints. For APIs, an endpoint can include a URL of a server or service.
To connect to a cloud service, which is compatible with AWS SDK, use an endpoint.
An endpoint can be found in the cloud dashboard or it can be found in the documentation after the keyword "s3 endpoints ${name cloud storage}”.
Ex: Wasabi:
s3.${Region}.wasabisys.com , Amazon: s3.${Region}.amazonaws.com- Insert the endpoint in the plugin field
- Please set the CORS policy in the cloud dashboard on your own.
Bucket name
Pre-signed URL - the link you receive in the pre-signed URL state
3. Resetting states
Resetting states - it is an action that will reset the states of the 'Convert to PDF' element.
Element Events
- Uploading to AWS is finished
- Converting is finished
- Pre-signed URL - is an event that shows that the Pre-signed is ready for use
Element Stat
- converting is finished
- output file URL
- uploading to file manager is finished
- pre-signed URL - It is a link signed can be used to enable the "Save to bucket" action to save a file to an Amazon S3 (Simple Storage Service) repository or any other compatible S3 cloud (this link has an expiration period);
Tips
- Send a file on email.
2. How to set a private image so that the plugin can print it
- Go to app settings and select the "API" tab.
- Here you will find the "Generate a new API token" button. Generate the token and return to the private image.
- Add the token to the image URL.
EX:image_url?api_token=newToken
