Looking for a solution to generate a PDF embedded on the client

I am currently using the nilsdannemann:pdfmake package to generate a pdf on the client and this works fairly well, minus a bit of styling limitations which I worked around. This works really great for my use case where I generated a PDF for a sales tag that can be opened in a new window and printed.

For another use case, I was looking for something similar to this but that will display the PDF embedded on the page rather than opening in a new window. I have looked into quite a few resources including PDF.js and Phantomjs…which make my head spin a little to be honest. I also like the pascoual:pdfkit, but it says it only works on server-side…which I assume would only be able to download the PDF not display it on the client. So I was hoping for something that comes as a meteor package and easy to use. But if there is a really detailed tutorial out there I could follow that would help a lot, but I haven’t found anything yet that helps out someone at my level :wink:

Does anyone have any suggestions for how to embed a PDF onto a page on the client?

Check out http://pdfmake.org/playground.html for an example

If you look at the source code of that page, what it does is basically

pdfMake.createPdf(dd).getDataUrl(function(outDoc) {
  document.getElementById('pdfV').src = outDoc;
});

That means, there should be a getDataUrl(callback) functionon createPdf which gives you a dataUrl which you can provide as the src of an iframe which is basically embedding a pdf on your page.

1 Like

It worked! Thank you! :slight_smile:

1 Like

Did you have to display PDFs for users on mobile as well? and if so I’m curious how that worked out with the iframe.

Sorry for necropost

We did that and it doesn’t work well. Now we use PDFs from Mozilla which works much better but needs some work to function.

Did you use a meteor package or an NPM module?

Custom included the code because we did not find a good and stable package. You will get some issues with the worker, that needs to be out of reach for the Meteor javascript parser. Or use a CDN.

Is the performance horrendous with large documents (on mobile)?

Not for us but we only have quite small documents with a few pages. In other cases it might be an issue. You can just test it, there are demo’s online to get the idea.