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

【问题标题】：Wicked_PDF unable to render SVG, canvas or PNG graphicsWicked_PDF 无法渲染 SVG、画布或 PNG 图形
【发布时间】：2013-08-19 09:05:03
【问题描述】：

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

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 正确渲染图像？只要图表正确呈现，我不关心格式。

【问题讨论】：

标签： d3.js wicked-pdf

【解决方案1】：

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

这是 whhtmltopdf Google Group 上关于该问题的两个线程的链接

Asking for canvas support

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

Charts not working with wkhtmltopdf

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

无法发布链接，因为我的声望太低了，但 Google 已经为您服务了

祝你好运，如果你取得任何进展，请告诉我们。

【讨论】：

我不认为这是wkhtmltopdf 的问题。我有最新的 0.12.x 版本的 wkhtmltopdf，它会生成带有图表的预期 pdf。但是wicked_pdf 没有。
Wicked PDF 只是包装了 wkhtmltopdf。你设置的 wicked pdf 使用的是什么版本的 wkhtmltopdf？
这与我在之前的评论wkhtmltopdf 0.12.3 (with patched qt) 中提到的相同。我发现我的图表没有显示在 pdf bcz 中，它没有调用我为图形生成创建的 js 函数。然后我只是将我的js 文件与wicked_pdf_javascript_include 助手标签一起包含在内，它就起作用了。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

这很奇怪，但是 svg 中的 d3.js 图表是以这种方式呈现的，但是如果你放置 url，它就不会呈现......

【讨论】：