嵌入 SVG 时 wkhtmltopdf 失败

Posted 2023-02-23

【中文标题】嵌入 SVG 时 wkhtmltopdf 失败

【英文标题】：wkhtmltopdf failure when embed an SVG

【发布时间】：2012-09-05 21:47:47

【问题描述】：

在这个广阔的领域中，有没有人有幸成功地创建了一个在 html 上嵌入了 SVG 的 PDF？我一直收到分段错误。

或者也许有任何其他方法可以将 SVG 嵌入 HTML 文件，然后将其导出为 PDF 而不是 wkhtmltopdf？

【问题讨论】：

这听起来很像我最近使用 SVG 使用 wkhtmltopdf 解决的问题。你试过哪个版本？使用静态链接的 0.9 版本来执行此操作我更幸运。

hsanders，我使用的是 0.11.0 rc1 .. 顺便说一句，你是如何嵌入文件的？

我们使用的 SVG 是由 highcharts 嵌入的（动态生成）

您找到答案了吗？答案对你有帮助吗？接受如果一个工作可能吗？

嗨@Jeebsion：根据 Nenotlep 的评论，您会考虑接受答案吗？如果这是/是最合适的，您可以接受自己的。

【参考方案1】：

我有类似的问题。似乎嵌入在 SVG 图像中的 javascript 会导致分段错误。

我正在使用 pygal Python 模块生成 SVG 图。为了成功地从带有 SVG 图形的 HTML 生成 PDF，我必须做几件事：

删除对 j​​avascript 的引用。 （在 pygal 的情况下，将 js=() 键添加到图形构造函数中）。

在svg标签中指定图片大小，如

<svg ...  >

（在 pygal 的情况下使用 explicit_size 关键字）

将 SVG 图像以 base64 编码形式嵌入到 img 标签中，例如

<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">

我使用的是第 11 版的 wkhtmltopdf。

【讨论】：

还可以尝试从 xml 文件中的任何标记中删除 opacity 属性；为我解决了这个问题。

将 SVG 文件扩展为 SVG 标记为我做了这件事。不幸的是，将它放在img 标记中没有任何作用。

【参考方案2】：

如果此修复对其他人不起作用，这就是我在 Ubuntu 64 下使用 chartist.js 和 wkhtmltopdf 0.12.2.1 的方法。（感谢 Panokev）

在所有其他 JS 之前将此添加到您的 javascript。

Function.prototype.bind = Function.prototype.bind || function (thisp) 
    var fn = this;
    return function () 
        return fn.apply(thisp, arguments);
    ;
;

明确设置图表div的宽度样式，例如-style="width:950px;"

【讨论】：

这是 chartist.js 特有的，它有什么作用？你能补充更多细节吗？

这是一个 polyfill，它可能对其他 Javascript 也有帮助，因为 wkhtmltopdf 使用 QtWebKit，而 Function.prototype.bind 存在问题。不特定于 SVG 文件，但使用它的文件除外。

【参考方案3】：

好吧..我终于成功了...只需要对原始 eps 文件进行一些处理即可。我用 illustrator 打开文件并选择“展平透明度” .. 也许它的作用是展平文件的许多层或其他东西.. 然后另存为 svg .. 它在 PDF 中很好地呈现 ..

如果有人遇到与我相同的问题，希望这会有所帮助。谢谢！ :D

【参考方案4】：

我们通过向 svg 除了 viewbox 属性添加宽度和高度属性来解决此问题。