首页 文章

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

提问于
浏览 次
1

我的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任何帮助！

UPDATE:

我已将问题分解为图表之前的特定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函数时问题仍然存在 .

ruby-on-rails highcharts wkhtmltopdf pdfkit

1 回答

  • 0

    据报道，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);
}
    回复于

相关问题