How to Generate a PDF

[R2bEEaton]

This is unbelievably hacky. Hopefully we get official support soon. HUGE downside is you can't select any text in the PDF. You effectively have taken a screenshot of a part of the page downloaded as a PDF.

Here is a brief explanation of how this works. Comment or check the included export if you have any questions.

1. html2pdf is a JavaScript function that lets you convert an HTML element to a PDF.
2. To get this into Budibase, download dist/html2pdf.bundle.min.js and upload it to a table in Budibase with an attachment field. Then get the URL of the file by right clicking on the preview on the table and copying the link. Uploading the script to a Budibase table is to get around an untrusted script source problem later on.
3. Import this script using an Embed element, making use of Budibase XSS as described in How to Add Custom JavaScript #6839.
4. Create and name a container to convert to a PDF. This will contain both the content and the look of your PDF.
5. Make a download PDF button using an Embed component. You can style this however you want and make it look like a Budibase button too if you want. Be sure to change container1 to whatever you named your container. All of this code below is necessary to include Budibase CSS when only converting a single container to PDF. If you want to do the whole page, it would be as simple as doing onclick="html2pdf(document);".

<button onclick="
var elementToPrint = document.createElement('html');
elementToPrint.appendChild(document.head.cloneNode(true));
var spectrumRoot = document.createElement('div');
spectrumRoot.className = 'spectrum spectrum--medium spectrum--light svelte-rrn5ov';
spectrumRoot.appendChild(document.querySelector(&quot;div[data-name='container1']&quot;).cloneNode(true));
elementToPrint.appendChild(spectrumRoot);
html2pdf(elementToPrint);
">Generate PDF of container1</button>

The PDF generation will take 5-10 seconds and even longer for the whole document, but it should start downloading automatically. You should probably display some waiting animation while it creates the PDF.

Here is the export. Please consult this if you have any confusion on how to implement the steps above.
PDF Hack-export-1660576133844.txt

The export was made on v1.2.20 and tested on Microsoft Edge.

[kasgithub8]

Hi @R2bEEaton,

the Import doesn't work for me❓

[kasgithub8]

In what way?

Well, I exported and imported it and the button didn't work.

Also the export was made using v1.2.20.

That's probably why.

[R2bEEaton]

Ok. The button should take 5-10 seconds to result in anything, so make sure you're giving it enough time. Also check the JavaScript console using your browser for any errors and let me know what you see. Which browser are you using?

[kasgithub8]

Chrome &

[R2bEEaton]

Okay, you might need to upload and download the html2pdf file to the
database yourself and re-link it yourself by modifying the html2pdf embed
in the component tree.

html2pdf is a JavaScript function that lets you convert an HTML element to a PDF.
When I follow your link, do I have to download a certain file? If not, which one do I upload?

The dist one from step 2.

(sorry I accidentally made new comments instead of replying)

[kasgithub8]

Ooh, got it now. This is neat. Thank u for explaining!

[R2bEEaton]

Okay, you might need to upload and download the html2pdf file to the database yourself and re-link it yourself by modifying the html2pdf embed in the component tree. [See @melohagan's comment.](#7278 (comment))

…

On Tue, Aug 16, 2022 at 8:56 AM Kevin ***@***.***> wrote: Chrome & [image: image] <https://user-images.githubusercontent.com/95284278/184884854-c6693e9c-58a0-4426-b544-709a12e1dea1.png> — Reply to this email directly, view it on GitHub <#7278 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIKNYIRJRF62YAQJYXAQ3RTVZOFXFANCNFSM56SRMBHQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[kasgithub8]

1. html2pdf is a JavaScript function that lets you convert an HTML element to a PDF.

When I follow your link, do I have to download a certain file? If not, which one do I upload?

[melohagan]

This is very nice - great job! 👍

File attachments are stored on your own MinIO instance, therefore to get this to work you will need to replace the file attachment.

Step 1 - Upload html2pdf

Open this link in your browser: https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js
Press Ctrl+S to download the file.

Edit the jsfile table row. Remove the existing attachment and upload the downloaded minified js.

Step 2 - Update the import embed

Click on the JS file to open the attachment in a new browser tab.

Copy the URL from /prod onwards:

Replace the addScript URL in the import embed:

Result

[R2bEEaton]

Good catch, thanks for this!

[rafikApp]

Hey @R2bEEaton
Can we generate the pdf using an automation.
For example when we click on (save). we will save the row and generate the pdf