是否可以将带有其他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元素的pdf(在本例中为canvas_img(。有人知道一个好的解决方案吗？

Answer 1

看起来您可能需要研究Javascript回调。onrendered回调不会立即发生，而是在操作完成后执行。

您应该将最后3行移到最后一个嵌套的onrendered回调中。通过此更改，PDF将在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);
// 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);
});