Wicked_PDF cannot display SVG graphics, canvas or PNG

Question

I am trying to display some diagrams using D3 and wicked_pdf. Graphs display well when I enable the show_as_html flag. But when I create PDF files myself, only the axes appear. The chart area itself is empty. I know that JavaScript is executing since the axes are displayed after the contents of the chart. I tried converting SVG to a canvas object using canvg.

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

Without changes. Then I converted the SVG to a PNG image using:

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

There is 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 displayed. How to get wicked_pdf to display images correctly? I do not need a format if the chart is displayed correctly.

Answer 1

Unfortunately, @TheMcMurder's answer will not help, since wicked_pdf uses wkhtmltopdf. Also, this is actually a problem for wkhtmltopdf, not wicked_pdf. I worked on the same issue with Chart.js (which uses elements).

Here is a link to two threads in the whhtmltopdf google group on the issue

• Canvas Support Request

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

• Charts not working with wkhtmltopdf

Some base search points for phantom.js are an alternative, but I have not tried it yet.

the link cannot be sent because my rep is too low, but Google covers you

Good luck and let us know if you make progress.

Answer 2

If you can try using http://wkhtmltopdf.org/ , I have found that this improves SVG performance.