angular - 以 PDF 格式在 highcharts 中生成/导出表格+图形

不幸的是，它是纯 Highcharts 库的唯一解决方案：

Highcharts 文档：https ://www.highcharts.com/docs/getting-started/frequently-asked-questions/#add-data-table 。

但是，可以按照这种方法制作具有多个图表和其他元素（如表格、图像、标题等）的更复杂的 pdf：

将带有每个图表选项的 AJAX 发送到 Highcharts 服务器。返回将是服务器上图像的 URL。
将来自 Highcharts 服务器的图像转换为 base64 格式。（您可以使用这些方法：https ://stackoverflow.com/a/20285053/10077925 ）
使用 jspdf 库将图表图像、表格、标题等添加到 pdf 并保存结果。

代码：

$(function() {

  const toDataURL = url => fetch(url)
    .then(response => response.blob())
    .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onloadend = () => resolve(reader.result)
      reader.onerror = reject
      reader.readAsDataURL(blob)
    }))

  var chartOptions = {

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

    subtitle: {
      text: 'Source: thesolarfoundation.com'
    },
    
    exporting: {
    	showTable: true
    },

    yAxis: {
      title: {
        text: 'Number of Employees'
      }
    },
    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'
          }
        }
      }]
    }

  };
  
  var chart = Highcharts.chart('container', chartOptions),
  	chartRows = chart.getDataRows();

  var specialElementHandlers = {
    '#editor': function(element, renderer) {
      return true;
    }
  };

  $('#cmd').click(function() {
    var obj = {
        options: JSON.stringify(chartOptions),
        type: 'image/png',
        async: true
      },
      exportUrl = 'https://export.highcharts.com/',
      imgContainer = $("#container"),
      doc = new jsPDF(),
      chartsLen = 1,
      imgUrl;

    var calls = [];

    for (var i = 0; i < chartsLen; i++) {
      calls.push({
        type: 'post',
        url: exportUrl,
        data: obj,
      });
    }

    $.when(
      $.ajax(calls[0])
    ).done(function(c1) {

      imgUrl = exportUrl + c1;

      toDataURL(imgUrl)
        .then(dataUrl => {
          doc.setFontSize(30);
          doc.text(35, 25, 'PDF Title');
          doc.addImage(dataUrl, 'PNG', 15, 40);

					doc.autoTable({
          	startY: 180,
            head: [chartRows[0]],
            body: chartRows.filter((elem, i) => {
            	if (i !== 0) {
              	return elem;
              }
            })
          });

          doc.save('sample-file.pdf');
        })
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://unpkg.com/jspdf"></script>
<script src="https://unpkg.com/jspdf-autotable"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div class="chart-outer">
    <div id="container"></div>
    <!-- data table is inserted here -->
</div>
<br><br>
<button id="cmd">generate PDF</button>

演示：

https://jsfiddle.net/BlackLabel/tzcujfyv/

angular - 以 PDF 格式在 highcharts 中生成/导出表格+图形

问题描述

解决方案

推荐阅读