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 within text), but hey, at least that much actually works!
- This might be a little rough around the edges, buyer beware!
- Since both Retool and Handlebars.js use curly braces
{{ }}this causes a conflict. So your Handlebars templates will use double square brackets instead[[ ]]and the component translates these for use by Handlebars. - You cannot use image URLs in your templates. There are CORS issues with this that I don't think are avoidable (I spent many hours trying!). So you need to convert your images to base64 and use those. My sample app shows how to pass an image in the JSON data using base64. Here is a site that will do the conversions: https://www.base64-image.de/
- This is hard coded for A4 in portrait and px units. jsPDF get a little squirrely when going to inch units so I kept it metric-ish which seems to work (I did say it was a little rough around the edges didn't I?)
- Handlebars.js documentation can be found here.
- I included a couple of helpers.
currencyconverts a numeric value into US dollars (sorry Europe!).sumTotalsums an array with atotalproperty and returns it in dollars.sumQuantitysums an array with aquantityproperty. You can see how these work in the sample app. - The module consists of three components:
- A PDF Viewer that does nothing but display the base64 passed to it.
- A custom component that does all of the magic. Study this to see how things work, change margins, page orientation, modify handlebars helpers and such.
- A Refresh button. This is needed because if you change the JSON or template the PDF will not be automatically redrawn.
Improvements that someone could work on if they so desired:
- Direct printing without download.
- Add Inputs for page orientation, page size, margins, canvas scaling and such things.
- A way to pass in Handlbars helpers (not sure if this is possible but would make it more easily extensible)
- Explore possibly using pdfMake instead of jsPDF. pdfMake talks a good game, but it is v0.2 and I ran out of steam to see if it is a better alternative to html2pdf and jsPdf.
?