pdfmake可以生成混合的highcharts（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可以生成混合的highcharts（SVG）和其他html内容吗？

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1