使用phantomjs将highcharts极坐标图导出为PDF

时间:2013-04-18 13:32:14

标签: highcharts phantomjs

我正在为客户端项目评估highcharts,并且遇到了使用phantomjs呈现极坐标图的问题。图表线条呈现出厚厚的灰色斑点!我认为这是由于动画,但那是关闭。将尝试发布图像,但任何人都有任何想法可能导致这个?如果我从chrome打印预览,它看起来也没问题。

这是image

这是我使用phantomjs附带的rasterize.js脚本构建的报告的一部分。所有其他图表都运行良好,极地图表是唯一没有出现的图表。如果我使用highcharts导出服务器脚本与phantomjs它工作正常 - 但这只允许1图表导出为PDF。我需要将整个网页导出为PDF,包括一些图表。

1 个答案:

答案 0 :(得分:6)

该项目的错误跟踪还有另一种解决方法:

https://github.com/ariya/phantomjs/issues/10364#issuecomment-14992612

您需要做的就是在渲染到文件之前删除具有低不透明度的所有页面元素:

diff --git a/examples/rasterize.js b/examples/rasterize.js
index fcd74cd..dcc81d4 100644
--- a/examples/rasterize.js
+++ b/examples/rasterize.js
@@ -19,6 +19,16 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {
             console.log('Unable to load the address!');
         } else {
             window.setTimeout(function () {
+                // Remove all low-opacity paths. see PhantomJS  issue #364 
+                page.evaluate(function () {
+                    var paths = document.getElementsByTagName("path");
+                    for (var i = paths.length - 1; i >= 0; i--) {
+                        var path = paths[i];
+                        var strokeOpacity = path.getAttribute('stroke-opacity');
+                        if (strokeOpacity != null && strokeOpacity < 0.2)
+                            path.parentNode.removeChild(path);
+                    }
+                });
                 page.render(output);
                 phantom.exit();
             }, 200);

即使您无权访问包含图表的页面来源,也可以使用它来获取图表。