嵌入 SVG 时 wkhtmltopdf 失败

Posted

技术标签:

【中文标题】嵌入 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 属性添加宽度和高度属性来解决此问题。

【讨论】:

以上是关于嵌入 SVG 时 wkhtmltopdf 失败的主要内容,如果未能解决你的问题,请参考以下文章

python 爬虫,网页转PDF:OSError: No wkhtmltopdf executable found

为啥 php 不能正确检测到 pdf mime 类型(wkhtmltopdf)?

通过 img 嵌入时将 SVG 定位到左侧

html5页面嵌入svg元素后,IE11浏览器下页面底部有大量留白

在使用canvas api在浏览器中将svg转换为png时,svg中的嵌入图像在Safari中随机空白

在 <img> 标签中使用时,嵌入在 SVG 中的动态 CSS 不起作用