jspdf 无法正确捕获 div 内容以供 highcharts 下载为 pdf 格式

Question

我想在 pdf fprmat 中下载 html 的内容，但在这里我使用的是 highcharts 但是当我下载 pdf 时它无法捕获图表的内容，它只能捕获文本内容。我已经使用了所有额外的插件，如 addimage、标准字体等，即使它无法打印。还有我需要使用的任何其他插件，还是我需要使用任何 highcharts 插件，这是下面的代码

    $(function () {
    
        var specialElementHandlers = {
            '#editor': function (element,renderer) {
                return true;
            }
        };
     $('#cmd').click(function () {
            var doc = new jsPDF();
            doc.fromHTML(
                $('#container').html(), 15, 15, 
                { 'width': 170, 'elementHandlers': specialElementHandlers }, 
                function(){ doc.save('sample-file.pdf'); }
            );
    
        });  
    });
    Highcharts.chart('container', {
    
        title: {
            text: 'Solar Employment Growth by Sector, 2010-2016'
        },
    
        subtitle: {
            text: 'Source: thesolarfoundation.com'
        },
    
        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'
                    }
                }
            }]
        }
    
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>
    <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="http://cdn.immex1.com/js/jspdf/plugins/jspdf.plugin.from_html.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>
    <div id="container"></div>
     <button id="cmd">generate PDF</button>

Answer 1

要下载图表内容，您可以使用 Highcharts 导出。导出自定义按钮点击chart.exportChart方法可以使用：

$('#cmd').click(function() {
  chart.exportChart({
    type: 'application/pdf',
    filename: 'my-pdf'
  });
});

注意，另外exporting module 必须在 highcharts 脚本之后加载。

文档参考：
https://www.highcharts.com/docs/export-module/export-module-overview

演示：
https://jsfiddle.net/wchmiel/ue3pav2g/1/

编辑：

要使用 jspdf 下载多个图表，您必须按照以下步骤操作：

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

代码：

  $('#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, 'First caption');
          doc.addImage(dataUrl, 'PNG', 15, 40);
          doc.text(35, 175, 'Second caption');
          doc.addImage(dataUrl, 'PNG', 15, 185);
          doc.save('sample-file.pdf');
        })
    });
  });

演示：https://jsfiddle.net/wchmiel/4a8u16ck/1/

Answer 2

要获取需要将 HTML 部分转换为画布的图表内容，请下载 npm 包 html2canvas。 有一个内置函数 html2canvas，它将元素 id 作为参数并返回画布。可以使用 addImage 函数将返回的画布添加到文档中。

//you need to import html2canvas
import * as html2canvas from 'html2canvas'
$(function () {

$('#cmd').click(function () {
   var doc = new jsPDF();
   let chartelement = document.getElementById('container');

function tellMeWhenToReturn(){
return new Promise((resolve) => {
  const elementToPrint = document.getElementById(id) //The html element to become a pdf
  html2canvas(elementToPrint).then((canvas) => {
    const contentDataURL = canvas.toDataURL('image/png');
    resolve(contentDataURL );
  });
});
}

tellMeWhenToReturn().then((data)=>{
  doc.addImage(data, 'margin', 'widthimage', 'imageheight');
 });


    });  
});