使用 wkhtmltopdf 输出到 PDF 时页面上的 Highcharts 图表无法正确呈现答案

【问题标题】：Highcharts charts on a page not rendering correctly when output to PDF using wkhtmltopdf使用 wkhtmltopdf 输出到 PDF 时页面上的 Highcharts 图表无法正确呈现
【发布时间】：2013-01-31 22:50:42
【问题描述】：

我的 wkhtmltopdf PDF 输出的页面上有几个 Highcharts 图表缺少图表的一些元素，主要是所有简单的直线，包括刻度线、网格线、列边框、图例边框和我的行中的线条/样条图（数据点显示）。

我已经尝试了从其他堆栈问题中解决此问题的技巧，即在系列中设置以下所有内容：

enableMouseTracking: false,
shadow: false,
animation: false

...以及在列/样条上设置它们。没有运气。

这是link to an image of the browser page。

这是link to an image of the pdf output。

这是前两个图表的link to a gist of my chart options。

这一切都在安装在 VirtualBox 客户机中的 Linux Ubuntu 12.04 上，使用截至两天前下载的最新 Highcharts 和 wkhtmltopdf 版本 0.10.0_rc2。对 wkhtmltopdf 的调用主要通过 Rails 3 应用程序中的 PDFKIT gem，但我在命令行上直接调用 wkhtmltopdf，结果相同。

TIA 寻求帮助！

更新：

我已将问题归结为图表之前的 HTML 的特定 sn-p。我正在使用 Twitter Bootstrap css/javascript 框架，此代码生成一组按钮：

<div class='btn-group' data-toggle='buttons-radio'>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
  <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>

具体来说，是 .btn-group 标签的存在导致了问题 - 把它拿走，让其他一切保持原样，PDF 生成的页面显示与没有注意到的问题相同。此外，如果您将此 sn-p 移动到图表之后页面上的任何位置，则一切正常。

我已将问题进一步隔离到实际的 html/css，因为当我完全禁用 Bootstrap javascript 功能时问题仍然存在。

【问题讨论】：

我也有同样的问题。有谁知道如何解决这个问题？
除了更新中提到的缩小范围之外，我无法获得任何信息。如果您删除 btn-group html 内容，一切正常。
我注意到，如果容器的兄弟姐妹或容器的父级在 css 中定义了边框，则此页面上的图表大多呈现不正确。但并非总是 ;-) - 有些被正确渲染...

标签： ruby-on-rails highcharts wkhtmltopdf pdfkit

【解决方案1】：

在 wkhtmltopdf 上报告了一个与您的情况非常相似的问题。见issue 689。 wkhtmltopdf 不能正确处理透明度/阴影，并可能导致不可预知的结果。

删除 svg 中的所有 stroke-opacity 属性并将其替换为 opacity 属性，然后再将其发送到 wkhtmltopdf。这段代码就可以解决问题。

nodes = document.querySelectorAll('*[stroke-opacity]');

for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) {
    elem = nodes[nodeIter];
    opacity = elem.getAttribute('stroke-opacity');
    elem.removeAttribute('stroke-opacity');
    elem.setAttribute('opacity', opacity);
}

【讨论】：

感谢您为我看这个。不幸的是，正如您从我刚刚添加到原始问题中的进一步测试更新中看到的那样，这似乎不是问题。
嗯，到目前为止，它“找到了问题”，但还没有“解决”。 ;)

【解决方案2】：

尝试传递选项 javascript-dealy

wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - -

或者，如果您使用的是 pdfkit gem/library，请尝试在 html 代码中添加以下行

 <meta content="5000" name="pdfkit-javascript-delay"/>

【讨论】：