1

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

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

enableMouseTracking: false,
shadow: false,
animation: false

...以及在列/样条上设置那些。没运气。

这是浏览器页面图像的链接。

这是pdf 输出图像的链接。

这是前两个图表的图表选项要点的链接。

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

TIA 寻求帮助！

更新：

我已将问题隔离到图表之前的特定 HTML 片段。我正在使用 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 生成的页面显示与没有注意到的问题相同。此外，如果您将此代码段移动到图表之后页面上的任何位置，则一切正常。

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

4

2 回答 2

0

wkhtmltopdf 上报告了一个与您的情况非常相似的问题。见问题 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);
}
于 2013-02-01T12:32:05.387 回答
0

尝试传递选项 javascript-dealy

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

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

 <meta content="5000" name="pdfkit-javascript-delay"/>
于 2018-12-25T13:00:17.217 回答