Tutorial: Making PDF's in Retool

[JoeyKarczewski]

Hi all!

@KLP and the Bold Tech team just made this neat tutorial on how to make PDFs in Retool and wanted to share. I know @bradlymathews also has one on carbone.io for generating reports. You can find his here: How to Print a PDF?

Here is the gist if you don't have time to read it (the tutorial goes in-depth for all of these)

• Within Retool, you can use the resource query option, ‘PDF Exporter’, to make PDFs using Markdown. The PDFs can be downloaded directly to your PC, but it isn’t possible to generate unique file names, and, as it does not allow for HTML, formatting can be an issue.
• Also directly in Retool, the ‘downloadPage utility’ can be run using a JavaScript query to generate PDFs of all or part of your current Retool page, much like a screenshot. It allows unique filename generation, but if you require formatting above and beyond what is on the current Retool page you will find this quite limiting.
• An external API for PDF generation (such as APITemplate) can help you to overcome the drawbacks of the first two methods, if what you are looking for is more elaborate formatting capabilities and the ability to easily reference your Retool data in the PDFs (which is likely). It requires more steps to set up than the above two methods, but those steps are fairly straightforward and the benefit is getting a PDF that looks the way you want and includes the data you need.

You can read the full tutorial here: https://www.boldtech.dev/posts/creating-pdfs-in-retool

Let us know if there is a way that we should add or if you have any questions!

[KLP]

Hey all! That's me!
I had a lot of fun making this tutorial and hope it helps some folks. Please don't hesitate to contact me if you have questions

[Mariusz]

Thanks for sharing @KLP! APITemplate is an excellent product, let's give them a hand on Product Hunt! API Template - Generate images and PDFs with simple API | Product Hunt

[Audrey]

Hi @KLP ,
Thank you so much for writing down the tutorial. This helped me a lot to move forward in a project
Would you know how to insert dynamic images in the PDF based on URLs? Am a bit stuck here and would love some help

[KLP]

Hi Audrey,
I have not inserted dynamic images into my PDFs before so actually no idea off the top of my head. But I'm curious now and trying some things out - If I can make it work I'll let you know!

[Audrey]

I'm also continuing on my end and will let you know if I also find a way out

[jclutterbuck]

HI, I found your tutorial really instructional - thank you.

However I am struggling to get my data to "cycle" through in APITemplate.

I think the problem is the structure of the JSON data is in columns and not rows?

{ "Column1" : [Row1, Row2, Row3], "Column2" : [Row1, Row2, Row3] etc}

and not

{ [ ["Column1" : Row1, "Column2" : Row1],
["Column1" : Row2, "Column2" : Row2],
["Column1 : Row3, "Column3 : Row3], etc ] }

Any ideas how to solve this, either in Retool or in APITemplate?

Thanks

[JoeyKarczewski]

Hey @jclutterbuck

You could try something like this in Retool {{formatDataAsArray(yourdatsaource.data)}}

This will turn your data from an object of arrays to an array of objects.

Hope that helps!

Joey

[jclutterbuck]

@JoeyKarczewski

{{formatDataAsArray(yourdatsaource.data)}}

Thank you, soooo much, that's exactly it. Couldn't find that from Googling! I'm so excited.

Thanks again

Jeremy

[agaitan026]

Thank you for this great tutorial
There's any other alternative to that soft to generate pdf?

[jmikem]

Giving a ton of credit to @church for their thread here, PDFs Another Way: Custom Component + html2pdf - #7 by domjammoo -

Leveraging @church's previous work in the linked thread above, I've created a generic module built on the html2PDF JS library.

You can insert the module into any project, pass in an HTML string, and the component will provide a base64 binary output of the PDF, which you can then render inside of a standard Retool PDF component or output using the utils.downloadFile() function. The module contains hidden elements to make it easy for you to preview the generated PDF, but you can hide the module itself in your app.

This provides an additional means of generating highly-formatted PDFs without having to pay for a third-party service for PDF generation or hosting separate PDF-generation APIs.

https://storage.googleapis.com/public_shares/HTML_PDF_Export.json

[bradlymathews]

I am working on extending your idea to add Mustache.js templates so you can more easily make short PDF docs like an invoice (HTML2PDF can't handle long PDFs). Not sure if it will be a separate module that is compatible with this one or an extension of it, but I will post my results here.

Two things I noticed so far about HTML2PDF which are important.

1. If the HTML has any errors, Retool will go into an endless loop trying to rebuild the PDF over and over. I see there is an attempt to prevent this, but an HTML error does an end-run around it. Even using <br /> instead of <br> sets it off.

2. Images will not display if they are from an external source. To fix this you need to do two things. Change this line to add CORS: html2canvas: { scale: 2, useCORS: true }, and you need to make sure your image is hosted on a server that is configured with Access-Control-Allow-Origin. (Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language | MDN)

[bradlymathews]

I did extend the component to add Handlebars support. See the post here:

Handlebars to PDF Component

I have extended @jmikem's PDF component which is based on @church's tutorial on html2pdf and added handlebars.js to the mix. You pass in a handlebars template, some css and some JSON and you will get back a PDF ready to download. This is the component JSON file and here is a sample app that uses it to make an invoice. A few notes. This uses jsPDF and not html2pdf. I could never get pagination working with html2pdf. jsPDF has pretty rudimentary pagination (it will only prevent page breaks wi…

[pyee]

@JoeyKarczewski , APITemplate is great! I don't know how they eluded my google searches for all this time, but I love the online editor for the template/css/json data preview. Thanks for this post.

[wpraiz_staff]

Wonderful tutorial and initiative.

We are creating a new scenario of tutorials and free tools for our Startup community in Brazil (from the beginning simple tools to facilitate the creation of Prompts with GPT-3 and integrations with WordPress + Retool + DB) and this makes me very happy and excited, congratulations indeed.

As soon as the free course and the new structures are updated I'll be back here, the PDF app is very cool!

[JoeyKarczewski]

@pyee & @wpraiz_staff -

Glad you all really like the tutorial! We definitely need to update the article to include the different methods included from @bradlymathews & @church above.

Really hoping Retool builds out more PDF functionality in the future

[sophie]

Hey all! This tutorial has now been updated with new API options as well as adding in links to those community contributions so that we have all those resources in one place!

Happy to hear any feedback

How to Print a PDF?