是否可以将带有其他 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 colorvar 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);

});