Wicked_PDF 无法渲染 SVG、画布或 PNG 图形。

Question

我试图用D3和wicked_pdf来渲染一些图表。当我启用show_as_html标志时，图表显示得很好。但是当我渲染PDF本身时，只有轴显示出来。图表区域本身是空白的。我知道JavaScript会执行，因为坐标轴是在图表内容之后呈现的。我尝试使用canvg将SVG转换为canvas对象。

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

没有变化。然后，我使用canvg将SVG转换为PNG图像。

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

还是没有变化 然而，当我将一个类似的png图像作为静态图像插入到文档中时，使用 wicked_pdf_image_tag渲染出正确的图像。如何让wicked_pdf正确渲染图片？我不关心格式，只要能正确地渲染图表就可以了。

Answer 1

不幸的是，@TheMcMurder的回答没有帮助，因为wicked_pdf使用的是wkhtmltopdf。此外，这实际上是wkhtmltopdf的问题，而不是wicked_pdf的问题。我一直在研究Chart.js（使用元素）的同样问题。

下面是在whhtmltopdf谷歌群里关于这个问题的两个帖子的链接。

• 要求支持画布

这里是Github上讨论同样问题的帖子

• 无法使用wkhtmltopdf的图表。

一些基本的搜索指向phantom.js作为一个可能的替代方案，但我还没有尝试过。

因为我的信誉太低，所以不能发布链接，但Google已经为你提供了保障。

祝你好运，如果你有任何进展，让我们知道。

Answer 2

如果你可以尝试使用 http:/wkhtmltopdf.org 我发现这样能更好的显示SVG。

Answer 3

我也有同样的问题。在本地主机的设置下，我的解决方案是将完整的网页保存为html（鼠标菜单按钮并将页面保存为完整的网页）。然后执行。

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

你可能需要添加 --javascript-delay 10000，但也许不需要。

很奇怪，但是svg中的d3.js图表是这样渲染的，但是如果你把网址......放在这里就不渲染了。