Generate PDF from web app

Question

I need to generate a PDF from the current screen in my webapp. Some kind of screenshot, but I'm facing serious difficulties.

The main problem is that the view contains a grid made with jQuery Gridster; and some "widgets" contain complex elements like tables, highcharts, etc.

So plugins like jsPDF or html2canvas can't render my page in a prorper PDF. They always generate it blank.

This is how the page looks like. You can/move resize each element: (Sorry for the CIA style, but there's business data in there)

Some ideas I came across but don't work are:

• Using browser print-to-pdf feature programatically. (can't)
• Use phantomjs. (but page state matters, so...)

I believe a solution to this poroblem may be widely adopted by anyone trying to generate a PDF of img from current screen in a web app. Quite an unresolved problem.

It's ok if only works on Google Chrome.

Many thanks.

EDIT:

One posible solution might be to find a way to represent the current layout status with an object and save it with and id.

Then retrieve that object via url param with the id and apply the stored layout to the inital page.

This way I might able to take a screenshot with phatomjs, but it seems quite complex to me. Any alternative?

Unsettle

Is the screen you're wanting to get as a PDF behind a login or is it accessible by anyone? – Cockayne

@eskimo not, it's not behind a login screeen. However it's a dynamic page, using Angular. So that's the main problem, it's not static and depends on the status of the grid (positions, sizes, etc) – Unsettle

I was working on something similar recently (Using jsPDF) and a combination of manually building a similar structure for the data and adding base64 images from my canvas based graphs seemed to work well. Does your PDF have to be an exact copy, or do you just want a passable representation of your data? – Silsby

@Silsby I need an exact copy, just like a screenshot. Or as much exact as posible. jsPDF did something for me, but not enough. Thanks. – Unsettle

I don't think this is easily doable. You can't take a screenshot with js. – Pneumatograph

@SlavaKnyazev I know. But somebody must have came across something similar. I just want to generate a PDF (or even a image) from the current screen. – Unsettle

Google has a "hidden" API for capturing screenshots (used for webmaster tools), but it's limited to 320px wide images. It would also be incredibly convoluted to use since the content is behind a login. You would have to regenerate the page (temporarily) available to public and use the google api to generate the screenshot (then "destroy" the public page). It would work, but the image is probably too small to be useful – Cockayne

@eskimo thank you for your comment, but it seems it can only take an image from an specified url, so page status won't be respected. Thanks. – Unsettle

This is very doable with server side code. I have had the most luck with wkhtmltopdf. There are wrappers written for it for several server side languages. wkhtmltopdf.org – Nadbus

Answer 1

Based on the fact that you're struggling with capturing dynamic content, I think at this point you need to take a step back and see that you might need to alter your approach. The reason these plugins are failing is because they will only work with the HTML before interactions right?

Why not convert the HTML to .pdf format from the server side? But the key part here is, send the current HTML back. By sending it back, you're sending updated static HTML back to the server to be rendered into a PDF? I've used HTML to PDF from server side before and it works fine, so I can't see why it wouldn't be appropriate here.

See this answer for details about HTML to PDF server side.

Syllabus

I'm not sure highcharta will be properly rendered, but i'll try anyway. Thanks. – Unsettle