-1

我正在尝试通过 JavaScript 打印 Highcharts 图表。其中一个要求是打印必须在单独的窗口中完成，这意味着我不能使用 Highcharts 附带的 .print() 函数。所以我最终做的是克隆 highcharts 的容器，然后将其发送到新窗口。它适用于 Chrome、Firefox、IE9/10，但在 IE 8 中仅渲染轴。

铬合金：

Chrome Highcharts

IE8：

IE8 Highcharts

我发现了一个有类似问题的 Highcharts 的错误报告：https ://github.com/highslide-software/highcharts.com/issues/1560

根据报告，问题在于我没有使用的 IE8 兼容模式。IE9/IE10、Chrome 或 Firefox 中不存在此问题。

下面是我用来将标记发送到新窗口的代码。'/print' 只包含几个基本的 CSS 文件。我不确定为什么要这样附加事件处理程序；我只是被告知这样做是有原因的，没有任何澄清。

var clone = $('#highcharts-demo').clone().get(0);

var params = [
  'width='+screen.width,
  'height='+screen.height
].join(',');

var printWindow = window.open('/print', 'Print', params);
printWindow[printWindow.addEventListener ? 'addEventListener' : 'attachEvent'](
  (printWindow.attachEvent ? 'on' : '') + 'load', function () {
  printWindow.document.body.innerHTML += clone.outerHTML;
  printWindow.document.close();
  printWindow.focus();
}, false);
4

2 回答 2

1

我认为问题出在 jQuery.clone() 上。不幸的是，我不知道为什么..但是这是可行的解决方案：

var clone = document.getElementById('highcharts-demo');

然后：

printWindow.document.body.innerHTML += clone.innerHTML;
于 2013-08-05T13:47:47.533 回答
0

请注意，IE 中有一个 SVG 打印错误，可以通过以下 CSS 进行“修复”：

svg { position: absolute !important }

不知道这与您的具体问题有多相关，但是当我为自己的问题寻找解决方案并且 CSS 是解决方案时出现了这个问题。

于 2015-07-06T13:50:40.677 回答