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 })

没有变化。然后，我使用以下方法将SVG转换为PNG图像：

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

仍然没有变化。但是，当我使用wicked_pdf_image_tag将类似的png图像作为静态图像插入到文档中时，将呈现正确的图像。 如何让wicked_pdf正确渲染图像？只要图表正确呈现，我就不关心格式。

Answer 1

不幸的是@McMurder的回答无济于事，因为wicked_pdf使用了wkhtmltopdf。此外，这实际上是wkhtmltopdf而不是wicked_pdf的问题。我一直在使用Chart.js（使用元素）处理相同的问题。

以下是关于该问题的whhtmltopdf Google网上两个主题的链接

• Asking for canvas support

这是一个讨论Github上可能是同一个问题的线程

• Charts not working with 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图表​​是以这种方式呈现的，但是如果您放置url则不会呈现...