4

我正在尝试使用 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()

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

4

3 回答 3

1

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

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

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

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

无法发布链接，因为我的代表太低了，但谷歌已经覆盖了你

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

于 2015-01-20T17:48:06.417 回答
0

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

于 2014-08-22T15:24:47.027 回答
0

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

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

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

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

于 2020-05-07T17:38:06.883 回答