从高图表向pdf导出中插入/添加图像

Question

我正在尝试使用导出按钮单击来导出html中的所有div。

$('#export-pdf').click(function(e) {
    e.preventDefault();

    //jsPDFExportFromHtml();

    Highcharts.exportCharts([chart1, chart2, chart3, chart4], {
        type: 'application/pdf'
    });
});


Highcharts.getSVG = function(charts, options, callback) {
    var svgArr = [],
        top = 0,
        width = 0,
        addSVG = function(svgres) {
            // Grab width/height from exported chart
            var svgWidth = +svgres.match(
                    /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1],
                svgHeight = +svgres.match(
                    /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1],
                // Offset the position of this chart in the final SVG
                svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            top += svgHeight;
            width = Math.max(width, svgWidth);
            svgArr.push(svg);
        },
        exportChart = function(i) {
            if (i === charts.length) {
                return callback('<svg height="' + top + '" width="' + width +
                    '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
            }
            charts[i].getSVGForLocalExport(options, {}, function() {
                console.log("Failed to get SVG");
            }, function(svg) {
                //   console.log(svg);
                addSVG(svg);
                return exportChart(i + 1); // Export next only when this SVG is received
            });
        };
    exportChart(0);
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

    console.log("Highcharts.exportCharts ");
    // Get SVG asynchronously and then download the resulting SVG
    Highcharts.getSVG(charts, options, function(svg) {
        //console.log(svg);
        Highcharts.downloadSVGLocal(svg, options, function() {

            console.log("Failed to export on client side");
        });
    });
};

现在，我想在导出文档的末尾附加另一个pdf。

使用Html2PDF和jspdf的示例将html捕获为png并将其添加到页面中：

function jsPDFExportFromHtml() {
        html2canvas(document.getElementById('dataTableDiv')).then(function (canvas) {
            var img = canvas.toDataURL("image/png");

            var doc = new jsPDF('p', 'pt', 'a4');
            doc.addImage(img, 'PNG', -5, 0);
            doc.save('test.pdf');
        });
    }

最后，它应该与highchart导出的pdf合并。

我尝试使用html2canvas和jspdf导出highcarts和其他div，但是使用html2canvas的highchart svg元素的质量确实很差。

这就是我要采用这种方法或其他替代方法的原因。