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
3 Likes
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! 
1 Like
I'm also continuing on my end and will let you know if I also find a way out 
2 Likes
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
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
1 Like
Thank you, soooo much, that's exactly it. Couldn't find that from Googling! I'm so excited.
Thanks again
Jeremy
2 Likes
Thank you for this great tutorial
There's any other alternative to that soft to generate pdf?
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
2 Likes
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)
1 Like
I did extend the component to add Handlebars support. See the post here:
@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.
1 Like
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!
1 Like
@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 
2 Likes
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 
6 Likes
Is there a way to add a signature (saved as an image) into the pdf using the retool options?
1 Like
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).
1 Like
Did you ever find a way to get these images into the PDF?