是否可以将带有其他 div 元素的 Canvas 打印为 pdf？

Question

我一直在尝试将图表（画布）连同自定义标题和图例（div 元素）一起打印为 pdf 格式，但到目前为止都没有成功。我得到了 jspf 库和 html2canvas，但没有任何效果。这是我尝试过的代码片段：

$('#print-chart-btn-donut').on('click', function () {

var canvas = document.querySelector('#' + chart_name_donut + '_Chart');

var canvas_img = canvas.toDataURL("image/png", 1.0); //JPEG will not match background color

var doc = new jsPDF('landscape', 'in', 'letter');

html2canvas(document.getElementById(chart_name_donut + "_Title"), {

    onrendered: function (canvas) {

        html2canvas(document.getElementById(chart_name_donut + "_LegendContainer"), {

            onrendered: function (canvas2) {

                var img = canvas.toDataURL("image/png");

                

                doc.addImage(img, 'png', -4.25, 2, 20, 4, 'Doughnut1', 0, 0);

                var img2 = canvas2.toDataURL("image/png");

                doc.addImage(img2, 'png', -4.25, 1.75, 20, 4, 'Doughnut2', 0, 0);

            }

        })

    }

});

doc.addImage(canvas_img, 'png', -4.25, 1.75, 20, 4, 'Doughnut', 0, 0);

doc.autoPrint();

var blob = doc.output("bloburl");

window.open(blob, 'Doughnut Chart', "height=" + window.outerHeight + ", width=" + 0.36 * window.innerWidth + "\"");});

使用此代码，它会生成仅包含原始画布元素（在本例中为 canvas_img）的 pdf。有谁知道一个好的解决方案？

Answer 1

看来您可能需要研究 Javascript 回调。回调onrendered不会立即发生，它们会在操作完成后执行。您应该将最后 3 行移到最后一个嵌套onrendered回调中。通过此更改，将在 html2canvas 渲染发生后生成 PDF。$('#print-chart-btn-donut').on('click', function() {    var canvas = document.querySelector('#' + chart_name_donut + '_Chart');    var canvas_img = canvas.toDataURL("image/png", 1.0); //JPEG will not match background color    var doc = new jsPDF('landscape', 'in', 'letter');    html2canvas(document.getElementById(chart_name_donut + "_Title"), {        onrendered: function(canvas) {            html2canvas(document.getElementById(chart_name_donut + "_LegendContainer"), {                onrendered: function(canvas2) {                    var img = canvas.toDataURL("image/png");                    doc.addImage(img, 'png', -4.25, 2, 20, 4, 'Doughnut1', 0, 0);                    var img2 = canvas2.toDataURL("image/png");                    doc.addImage(img2, 'png', -4.25, 1.75, 20, 4, 'Doughnut2', 0, 0);                    // Generate the PDF after the final callback has executed                    doc.autoPrint();                    var blob = doc.output("bloburl");                    window.open(blob, 'Doughnut Chart', "height=" + window.outerHeight + ", width=" + 0.36 * window.innerWidth + "\"");                }            })        }    });    doc.addImage(canvas_img, 'png', -4.25, 1.75, 20, 4, 'Doughnut', 0, 0);});