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

如何解决是否可以将具有其他div元素的Canvas打印为pdf？

我一直在尝试将图表（画布）以及自定义标题和图例（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);
                var img2 = canvas2.toDataURL("image/png");
                doc.addImage(img2,1.75,'Doughnut2',0);
            }
        })
    }
});
doc.addImage(canvas_img,'Doughnut',0);
doc.autoPrint();
var blob = doc.output("bloburl");
window.open(blob,'Doughnut Chart',"height=" + window.outerHeight + ",width=" + 0.36 * window.innerWidth + "\"");});

使用此代码，它仅使用原始canvas元素（在这种情况下为canvas_img）生成pdf。 有谁知道一个不错的解决方案？

解决方法

您似乎可能需要研究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);
                    var img2 = canvas2.toDataURL("image/png");
                    doc.addImage(img2,1.75,'Doughnut2',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,'Doughnut',0);
});