3

I am working on an application that converts HTML and SVG charts, generated with d3.js, to PDF. The charts are rendered through AJAX calls after the page loads.

I am working with wkhtmltopdf 0.9.6 which seems to do a great job converting static HTML5 to PDF, but I am having problems converting the SVG charts.

When rendering a simple multi series line chart, most of the chart area is not rendered. Even after disabling animations. Using the --redirect-delay doesn't help even when set to 8000.

What's interesting is that most that parts of the chart are rendered, like the legend and axis. Just not the content.

Anyone else encountered this or a similar problem?

Thank you.

user2300061
  • 171
  • 7
  • You have to convert the chat to an image in the HTML and then convert it using html-to-pdf. – Supriti Panda Apr 19 '13 at 17:17
  • You might have to wait a bit for the chart to appear completely. Try using `window.setTimeout` to add a delay before rendering to PDF. Alternatively, you might want to have a look at [phantomjs](http://phantomjs.org/) -- I have used it to convert d3 graphs (with animations) to PDF without problems. – Lars Kotthoff Apr 20 '13 at 10:12

2 Answers2

1

If you are using wkhtmltopdf in shell, as an alternative to setting a timer in your source, you can add this option:

--javascript-delay 30000

For instance, a complete command might look like this:

wkhtmltopdf --enable-javascript --debug-javascript --javascript-delay 30000 --images http://www.google.com google.pdf
Kristofer Dubbels
  • 11
  • 1
0

add last page this script: 

function sleep(milliSeconds) {
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

sleep(5000);

And: --redirect-delay -> 5000

Use library d3.js no compress other js.

Maxime Lorant
  • 34,607
  • 19
  • 87
  • 97
sanek
  • 11
  • 2