Search code examples
javascriptpdf-generationflotdashboard

Rendering client side charts on the server


The product I'm working on has some nice graphs on a HTML5 dashboard. The graphs are rendered in Javascript using Flot.

Users would like this Dashboard emailed to them daily as a PDF report, on a fixed schedule. So for example they want an email every day at 8am to be emailed to them.

I've thought of using Python's Requests (i.e. do a request.get) to get the HTML5 source of the page and then convert the resulting HTML5 page to PDF using Weasyprint but this is obviously not going to work.

The Javascript charts are the biggest headache as they won't render unless viewed in a browser that has decent Javascript support, so the outlined approach won't render the Javascript graphs.

What's the recommended way of converting a dynamically generated HTML5 page into PDF? How do other people do this?


Solution

  • PhantomJS is the solution. It's a headless WebKit implementation that allows us to render to PDF the dashboards with Javascript graphs and all.

    I've now set up a batch job that will run every day to convert our dashboards to a PDF document that gets emailed to the users.

    Addendum

    Some other things to be aware off. In the current 2.1 build of PhantomJS, there is a bug that causes renders to PDF to clip. The fix is scheduled for 2.2. A temporary workaround as detailed on the bug report is to set the CSS zoom level of the document. The following CSS fragment works for me.

    html {
        zoom: 50%;
    }