使用wkhtmltopdf输出为PDF时，页面上的Highcharts图表无法正确呈现 [英] Highcharts charts on a page not rendering correctly when output to PDF using wkhtmltopdf

问题描述

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

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

  enableMouseTracking：false，
 shadow：false，
动画：false 
  

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

以下是链接到浏览器页面的图片。

这是链接到PDF输出的图片。

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

这是安装在VirtualBox guest中的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 btndata-filter =school_yeardata-group =dr_filterdata-value =2012> 2012< / button> 
< button class =filterButton btndata-filter =school_yeardata-group =dr_filterdata-value =2011> 2011< / button> 
< button class =filterButton btn btn-primary selecteddata-filter =school_yeardata-group =dr_filterdata-value =2010> 2010< / button> 
< button class =filterButton btndata-filter =school_yeardata-group =dr_filterdata-value =2009> 2009< / button> 
< button class =filterButton btndata-filter =school_yeardata-group =dr_filterdata-value =2008> 2008< / button> 
< / div> 
  

特别是，存在导致问题的.btn-group标记 - 将所有其他内容保留原样，并生成与页面显示完全相同的PDF，而不会出现问题。此外，如果您将此代码段移至图表后面的任何位置，则一切正常。

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

解决方案

有一个关于wkhtmltopdf的问题，它非常类似你的情况。请参阅问题689 。 Wkhtmltopdf不能正确处理透明度/阴影，并可能导致不可预知的结果。

删除svg中的所有笔画不透明属性并将其替换为不透明属性将其发送到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）; 
} 
  

My wkhtmltopdf PDF output of a page with several Highcharts charts on it is missing some elements of the charts, primarily all of the simple straight lines, including tick marks, grid lines, column borders, legend borders and the lines in my line/spline charts (data points display).

I have tried the tricks used to solve this issue from other stack questions, namely setting all of the following on the series:

enableMouseTracking: false,
shadow: false,
animation: false

...as well as setting those on the column/spline. No luck.

Here is a link to an image of the browser page.

Here is a link to an image of the pdf output.

Here is a link to a gist of my chart options for the first two charts.

This is all on Linux Ubuntu 12.04 installed in a VirtualBox guest, using the latest Highcharts download as of two days ago and wkhtmltopdf version 0.10.0_rc2. The calls to wkhtmltopdf are primarily going through the PDFKIT gem in a Rails 3 application, but I have made direct calls to wkhtmltopdf on the command line with the same results.

TIA for any help!

UPDATE:

I have isolated the problem down to a particular snippet of HTML that comes before the charts. I am using the Twitter Bootstrap css/javascript framework, this code produces a set of buttons:

<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>

Specifically, it is the presence of the .btn-group tag that is causing the issue - take that away, leave everything else as is, and the PDF generates identical to the page display without the noted issues. Also, if you move this snippet to anywhere on the page after the charts, everything works correctly.

I have further isolated the problem down to the actual html/css, as the issue still exists when I completely disable the Bootstrap javascript functions.

解决方案

There is reported an issue on wkhtmltopdf which is very similar to your case. See issue 689. Wkhtmltopdf doesn't handle transparency/shadows properly and can result in unpredictable results.

Remove all stroke-opacity attributes in the svg and replace them with the opacity attribute, before you send it to wkhtmltopdf. This piece of code will do the trick.

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

这篇关于使用wkhtmltopdf输出为PDF时，页面上的Highcharts图表无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！