Wicked_PDF unable to render SVG, canvas or PNG graphics

Question

I am trying to render some charts using D3 and wicked_pdf. The charts show up fine when I enable the show_as_html flag. But when I render the PDFs itself, only the axes show up. The chart area itself is blank. I know the JavaScript executes since the axes are rendered after the chart content. I tried converting the SVG to a canvas object using canvg.

canvg($(this).find('#canvas')[0], $('<div>').append($(picture).clone()).html(), { ignoreMouse: true, ignoreAnimation: true })

No change. Then, I converted the SVG to a PNG image using:

$(this).find('#chart').append("<img id='as' src='" + $(this).find('#canvas')[0].toDataURL() + "'>").show()

Still no change. However, when I insert a similar png image into the document as a static image using wicked_pdf_image_tag, the correct image is rendered. How do I get wicked_pdf to render the images correctly? I don't care about the format as long as the chart is rendered properly.

Answer 1

I had same issue. With a localhost setup the solution for me was to save the full web page to html(mouse menu button and save page as complete web page). Then execute:

wkhtmltopdf -O Landscape -s A3 saved-page.html output.pdf 

You might need to add --javascript-delay 10000 too, but maybe not.

It's weird but d3.js chart in svg is being rendered this way, but it's not rendered if you place the url...

Answer 2

Unfortunately @TheMcMurder's answer will not help as wicked_pdf uses wkhtmltopdf. Furthermore, this is actually an issue for wkhtmltopdf not wicked_pdf. I've been working on the same issue with Chart.js (which uses elements).

Here is a link to two threads on the whhtmltopdf Google Group about the issue

• Asking for canvas support

And here is a thread discussing what might be the same issue on Github

• Charts not working with wkhtmltopdf

Some basic searching points to phantom.js as a possible alternative but I haven't tried it yet.

can't post link because my rep is too low, but Google has you covered

Good luck and let us know if you make any progress.

Answer 3

If you can try using http://wkhtmltopdf.org/ I've found that this does a better job displaying the SVG.