jsPDF Integration

Tips
4

A rough example. …

Recognising that dynamic values can be put into the javascript, which alters the script when the variables change, can replace the Hello World with something like this:

<script type="text/javascript">
  var pdf = new jsPDF();
  pdf.text(30, 30, 'Invoice total: $xxxxxsumproductxxxxx'');
  pdf.save('funky_invoice.pdf');
</script>

And replacing the xxxxxsumproductxxxxx with a dynamic expression:

This is kind of fun, every time the items change, a new PDF spits out.

I’d rather more control over the timing, so I put a workflow action on a button to turn on a custom state, pause for a bit, then turn off the custom state.

Pasted image1076×265 20.6 KB

Next, I put an “if” statement into the javascript so it only runs the bit I want when I want, and put the dynamic value of the custom state inside the if.

This lets the script run for half a second, enough time to generate the PDF, before changing it back to inactive.

This seemed to hang together without breaking the rubber bands, so I looked at putting in lists.

I took the easy path of doing a search for each field to produce three lists: labels, qty and price.
Then to make sure they turn up as text, use join with "," (single quotes around a comma).

With overall surrounding single quotes and square braces, they can be treated as a javascript array: ['label1','label2']

Note: to be more robust and allow for single quotes in the data, use double quotes instead, and filter out any double quotes in the data value with a regular expression.

So now I have javascript that looks like this:

And on the button press I get a nice invoice (The data changed since the last screenshot, so a different total):

I hope this is useful!

7 Likes