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?

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.