jsPDF Integration

I didn’t like the selectPDF plugin but I needed pdf generation for a project. I ended up using jsPDF.

Link:

Documentation:
http://rawgit.com/MrRio/jsPDF/master/docs/

Quick Tutorial

To start place this code in your page HTML header section

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

Use the HTML element in Bubble and place this code in it

<script type="text/javascript">
    var pdf = new jsPDF();
    pdf.text(30, 30, 'Hello world!');
    pdf.save('hello_world.pdf');
</script>

Preview the page and a pdf called hello_world should download. The pdf should have a single line reading “Hello, world!”

I notice sometimes you have to remove the debug-mode from the preview URL to get it to work.

The documentation shows you how to design the page and format the text or add images.

This should be fairly easy to add to Bubble as a plugin.

12 Likes

This is very cool! Thanks for sharing @nomadkelley!

1 Like

Hello @nomadkelley,

This is very interesting! Could explain a little bit more how you can export to PDF with a button, for example an invoice?

Thanks a lot.

Bests.

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.

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

Thanks @mishav for the explanation. I thought it would be easier so I need to dig in much more in this one.

Yes, it highlights the messy interface to javascript, if a plugin is not used.

You’re welcome.

1 Like

Hello,
I have been using SelectPDF for generating pdfs when I saw this post. It would be great with client-side pdf generation!

Is there any way to use jsPDF for printing the contents of the full page?
Thanks,
Søren

1 Like

Full page print would be possible, but not practical …

jsPDF provides functions to add pieces to the pdf, so instead of the whole page, you’d determine what specifically to print.

I think it is a good candidate for an element plugin, where you could supply a text template with logic in it for the script to follow, then add the dynamic data sources.

This plugin is hypothetical, i.e. hasn’t been written yet :slight_smile: The hardest part would be coming up with a suitable template / data source mapping.

Keep the good ideas coming, @soeren!

2 Likes

Thanks for the quick response. I’ll try a bit to see if this is feasible to do.

oh man, this is a plugin that I would pay for! really hate having to pay another monthly fee to get the functionality out of bubble that I need.

Most of it is just because I am picky about how my business/brand looks when messages are sent. I guess it would need to be able to support things like adding an image which I am sure could be called up from the data base. Then, links which would direct to users accounts so they could pay online.

But this has really taught me a lot.

is the ‘join with ‘,’’ readily available from the dynamic data selection menu? One of the biggest problems I am having is saving a list of things, with different values such as item, quantity, and price. Then getting them to display again somewhere else in a legible format.

The javascript interaction is a lot easier now, with running javascript from a workflow action.

If you have a set of known images, its easier to pre-convert images to strings of “data uri” for the pdf, which can then be stored in a text field in the database.

If you want dynamic images that are stored in S3, you’re likely to hit CORS issues trying to add them into the pdf.

Yes “join with” is available for any list that contains text, or numbers/dates/etc that can be represented as text. Would also want to escape any double quotes and backslashes inside the text, using find & replace.

Have you got any specific issue? I take it you’re no longer talking about jsPDF …

I could possibly help you get a jsPDF report working, although I’ve just taken on a heavy workload for the next three weeks.

1 Like

You are awesome kind sir, thank you for the offer!

Basically, the reason I was doing a PDF was because I initially tried to just send an email with the data in it, using dynamic fills. Unfortunately, that didn’t work very well because I didn’t know how to get the data back out in a manner which was legible to humans. But, I could get another page set up in bubble to display that information very well, so I sought to convert a whole page into a PDF instead.

However, the ‘sort by comma’ function that you brought up should be the trick I need. If I can get it to display in an email, then I shouldn’t need a pdf, just send out text. For now at least.

So I am going to play around with that sorting function to see what I can get accomplished.

Hi there,

I also would like to print my invoices with jspdf since selectPDF is incredibly slow and as you say it´s another monthly fee.

Did you get any clear idea on how to integrate this with Bubble?

Thanks a lot.

@mishav is it possible to wright a plugin that works with Jspdf?

Thanks both.

Sounds good. You have more control over layout with html email vs plain text.

The trickiest thing is images, easiest if they are all predefined, rather than loaded dynamically.

jsPdf functions are poorly documented, but it seems to be able to do lines, etc. and also render html … I’m not sure if the html render can be combined with the other functions.

Depends on how you want it to look. It would take a lot of work to write a plugin that suits every possible need, so it would be preferable to start with a desired solution.

Thanks @mishav,

I´m not a code guy so do you have any advice from where to start?

Also I would like to send the invoice as PDF so I guess this is pretty complex with jspdf, right?

Thanks a lot.

It has an “output” method, to return the PDF as a string. It would be interesting to see if could be set as an attachment to an email.

A good place to start is draw up: a desired invoice, make a note of which features you would be okay with not having.

Then list the data that you want to go into it, and think about how you would represent that in one or more Bubble data sources.

1 Like

That I´ve. The problem is with the code that I don´t even know where to start.

A little bit difficult, right?

Thanks a lot man.

Hey guys, thought I wrote up here on this yesterday but obviously forgot to post.

What about creating a plain bubble view that are formatted as a PDF page. Then using a JS plugin to convert the html to PDF.

The page would be for example “Reportmaker”. And you could have different groups in it hidden or visible based upon what type of report you are generating. Possibly you should have another page called PDFgenerator which uses html2canvas and jspdf. First it creates a canvas of the passed URL, then it uses jsPDF to save that and store to bubble.

See: http://stackoverflow.com/questions/26481645/how-to-use-html2canvas-and-jspdf-to-export-to-pdf-in-a-proper-and-simple-way

Alternatively you could place all HTML inside a bubble group and then use an inner html element with javascript to apply an ID to the div, then use the html2canvas on that DIV id and pass it to jsPDF.
You could then have a floating group on top to control the generation etc.

See: https://www.youtube.com/watch?v=WJOfCnoqShw

Anyone wanna contribute to this?

1 Like

Nice one!

I would like to contribute but I´m not coder. Is there anything else I can help with?