pdfmake 可以生成混合高图（SVG）和其他 html 内容吗？

Question

我想使用 pdfmake 将整个 html 页面下载为 PDF。但是，我的页面混合了图表、纯文本、html 和图像。当我尝试导出我的页面时，所有高图部分都丢失了（其余部分很好）。不确定 pdfmake 是否是处理它的最佳方式。有人可以帮忙吗？

谢谢

我已经重现了错误，请看

var app = angular.module("app", []);

 app.controller("listController", ["$scope",
   function($scope) {
     Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },

    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
     $scope.export = function(){
        html2canvas(document.getElementById('exportthis'), {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 500,
                    }]
                };
                pdfMake.createPdf(docDefinition).download("test.pdf");
            }
        });
     }
   }
 ]);

.container {
  max-width: 600px;
  min-width: 300px;
  margin: 0 auto;
}

#buttonrow {
  max-width: 600px;
  min-width: 320px;
  margin: 0 auto;
}

.highcharts-axis-line {
  stroke-width: 0;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>

<body>
  <div ng-controller="listController" id="exportthis">
    <div id="container" style="width:50%;float:left;">
      <p class="highcharts-description">
      </p>
    </div>
    <div>
      <table class="editorDemoTable" style="color: #000000; font-size: 14px; width: 536px;">
        <thead>
<tr>
<td style="width: 192px;">Name of the feature</td>
<td style="width: 181px;">Example</td>
<td style="width: 145px;">Default</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
<tr>
<td style="width: 192px;">Test Text</td>
<td style="width: 181px;">Test Text</td>
<td style="width: 145px;">&nbsp;</td>
</tr>
</tbody>
</table>
    </div>

    <button ng-click="export()">export</button>
  </div>
</body>

</html>

Answer 1

我猜您是想按原样在 PDF 中添加图表。问题是它是 canvas 并且在 .pdf 文件中呈现得很糟糕。

我已经遇到过这种情况，我对您的建议是首先生成支持的 image 版本的图表。

根据需要，您可以导出图表的 JPG、PNG 甚至 SVG 图片。为了不让 pdf 文件太大，并避免在放大时出现像素，我选择了 SVG 导出。

Here is a documentation and an example 了解如何 SVG 导出您的图表。

更进一步： 由于构成图表的数据是敏感数据，我需要设置自己的导出服务器。希望，Highcharts provide a well documented (and an official) way to set you own export server up with different OS supports.

pdfmake 可以生成混合高图（SVG）和其他 html 内容吗？

Can pdfmake generate mixed highcharts(SVG) and other html content?

highcharts

html5-canvas

jspdf

pdfmake