How to generate PDF from HTML page/template with dynamic fields

Ask us anything How do I?
1

I want to generate and let generate invoices for/to my users that they could download afterwards. I was looking with NPM packages to do it but hadn’t found any that could fill in a template (ideally preview it), and save it as a file.

2

Hi @bongoumedia :wave:

Could you show us what your page looks like in WeWeb and tell us which sections you’d like to display on the invoice?

There might be a simpler solution with a return window.print() custom Javascript action in a workflow.

Here’s a short video showing you how that would work.

Does that help?

3

Thanks for the insight @Joyce

Ir doesn’t work because there’s the metadata about the webpage on the borders.
Ideally someone should be able to edit it’s invoice from a certain page and be able to generate his quotes on-demand (and preview them as a webpage (IFrame) or PDF in the same editing page)

Here’s an example of a draft invoice to prototype:

image
image1350×855 33.2 KB

I’m hiding the editing part when printing for a better layout :

image
image1071×824 39.2 KB

4

Hey, check this out, might be what you’re looking for, you can Print → Save as PDF

I also have a working demo there.

2 Likes
5

Thanks a lot! I think it will work fine as a light V1. I used paper CSS as an action workflow (with this tool) followed by return window.print() and it seems to work fine for a print button.

Would you know if it’s possible to download the generated pdf programmatically to our servers when the button is pressed (to keep a copy)?

Thanks in advance

6

I think you’d need to use a different approach to generate the pdf programmatically and then post it.