Question

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

我尝试过用于解决其他堆栈问题的技巧，即在系列中设置以下所有内容：

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片段。我使用的是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函数时问题仍然存在。

Answer 1

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

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

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);
}

Answer 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"/>

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

2 个答案: