Angular.js, Highcharts, Phantomjs PDF打印机-图表不显示

Angular.js, Highcharts, Phantomjs PDF printer - graphs not showing up

本文关键字：显示 PDF js Highcharts Phantomjs Angular 打印机      更新时间：2023-09-26

我有一个非常奇怪的问题。我有一个使用Highcharts作为图形渲染库的Angular.js应用程序。此应用程序必须支持打印为PDF，这是使用我们公司使用的Phantomjs PDF服务完成的。

图形是使用自定义指令生成的。简化代码:

app.directive('metricsChartMulti', [
    function () {
        return {
            ...
            link: function postLink(scope, element, attrs) {
                ...
                // plot data after they are loaded
                scope.$on('DATA_LOAD_SUCCESS', function() {
                    var chartOptions = {
                        series: scope.series
                        ...
                    };
                    var chart = new Highcharts.Chart(chartOptions);
                });
            }
        }
    }
]);

系列数据(scope.series)在控制器中准备，控制器将它们添加到范围中。一切都在浏览器中完美地工作，没有错误。然而，当我调用基于Phantomjs2的PDF创建服务时，图形没有在返回的PDF文件中呈现。

我试图在代码中找到错误，但我相信我使用了Angular框架的通用最佳实践来创建应用程序。经过长时间的调试，我发现当我改变作用域时。序列为数据的静态模拟，PDF被正确绘制。

在浏览器(Chrome, Firefox)中，这不会产生明显的变化。

我还尝试直接从Highcharts网站使用不同的url生成pdf, pdf被正确创建。对我来说，这意味着公司的PDF服务没有问题。

你知道如何解决这个尴尬的局面吗?谢谢你。

所以最终的帮助是作用域的深度克隆。

var series = JSON.parse(JSON.stringify(scope.series));

对我来说，这是一种尴尬的解决方案，但至少它现在工作。

相关文章：