Create pdf with wkhtmltopdf and rendering javascript

Question

I'm attempting to create a PDF of a javascript chart that I have in a model window (my chart is a combination of javascript and css in an .aspx view). The only thing in the rendered PDF file is the static content from the window, the actual javascript chart is not there.

My call to create the PDF is as follows:

public byte[] WKHtmlToPdf(string url)
    {
        var fileName = " - ";
        var wkhtmlDir = "C:\\Temp\\wkhtml";
        var wkhtml = "C:\\Temp\\wkhtml\\wkhtmltopdf.exe";
        var p = new Process();

        p.StartInfo.CreateNoWindow = true;
        p.StartInfo.RedirectStandardOutput = true;
        p.StartInfo.RedirectStandardError = true;
        p.StartInfo.RedirectStandardInput = true;
        p.StartInfo.UseShellExecute = false;
        p.StartInfo.FileName = wkhtml;
        p.StartInfo.WorkingDirectory = wkhtmlDir;

        string switches = "";
        switches += "--print-media-type ";
        switches += "--margin-top 0mm --margin-bottom 0mm --margin-right 0mm --margin-left 0mm ";
        switches += "--page-size Letter ";
        p.StartInfo.Arguments = switches + " " + url + " " + fileName;
        p.Start();

        //read output
        byte[] buffer = new byte[32768];
        byte[] file;
        using (var ms = new MemoryStream())
        {
            while (true)
            {
                int read = p.StandardOutput.BaseStream.Read(buffer, 0, buffer.Length);

                if (read <= 0)
                {
                    break;
                }
                ms.Write(buffer, 0, read);
            }
            file = ms.ToArray();
        }

        // wait or exit
        p.WaitForExit(60000);

        // read the exit code, close process
        int returnCode = p.ExitCode;
        p.Close();

        return returnCode == 0 ? file : null;
    }

Any ideas on how I could grab the javascript chart? Perhaps the .Net version would be more appropriate or I have to save the generated page to a file and pass that into the tool.

Thanks.

Answer 1

In our project we do something simular, with success. We use wkhtmltopdf 0.9.9 in combination with Highcharts at the moment. With jQuery flot we had success too after a little tweaking. In our project we first render the view to a string and pass it to wkhtml using it's stdin. Then we catch the stdout of wkhtml and pass it back to the browser.

Your wkhtml-setting seems to be right, except we use stdin and stdout. Don't know if that can be a problem.

If you use one of those charts I think I can help you. What chart are you using?

One last note: Wkhtmltopdf 0.10rc2 seems to have some problems loading external resources (js/css) from localhost when using a portnumber different from port 80.

Answer 2

It looks like you're trying to get the output of a chart, which judging by the tags is from an Extjs 4 script.

The ext script is probably using some of the chart's animation, and will certainly be waiting for javascript events to execute and render the chart. It's probably therefore not done by the time the default time (200 ms) is done.

A quick fix would be to add the javascript-delay page option to the command line:

wkhtmltopdf http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Mixed.html --javascript-delay=2000 test.pdf will certainly work on *nix, and a similar thing should work on windows.