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.
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
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!
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.
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.
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.
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)
@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.
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!
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
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!
As we are developing apps for our sequencing core, we also have a need to create invoice PDFs for download. Given that the point of Retool is to embolden users to make display apps with the control to make things look the "way you want it", it should be an integrated part of Retool to simply export that nice view we have all worked on developing for months/years.
Exporting a high resolution PDF of a webpage is not rocket science and should be a top priority for Retool to make something so simple available at the click of a button, instead of forcing the use of external tools (Carbone or accounting software) and/or complex coding modules above...although I certainly appreciate people's work and making it widely available, it shouldn't be this hard.
Heroku, where we came from for our previous apps/system, could make them with a click of a button, formatted using whatever HTML coding you wanted (= superior format control) and with the inclusion of local/hosted images (in their native format without any more fiddling/converting).
I know @bradlymathews also has one on carbone.io for generating reports. You can find his here: How to Print a PDF?
