jsPDF和html2canvas不将图像写入pdf答案

【问题标题】：jsPDF & html2canvas not writing image to pdfjsPDF和html2canvas不将图像写入pdf
【发布时间】：2018-04-18 19:44:34
【问题描述】：

使用 jspdf 和 html2canvas 在表格配置器上拍摄用户选择的配置的快照（选择顶部/侧面/层压颜色）。它是通过使用透明 png 更改每个图像的来源来实现的。

我在将图像插入 pdf 时遇到问题。我可以毫无问题地将其附加到文档中，并将文本和其他图像写入 pdf 而没有问题。我担心我的图像太大了。生成的 base64 输出非常庞大。

我已将它写入控制台：

var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, 'should be an image under here'); 
html2canvas($("#prod"), {
    useCORS : true,
    onrendered: function(canvas) {
       var imgData = canvas.toDataURL('image/jpeg');

       doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
        console.log(imgData);
        $('#prod').append(canvas);
    }
});
doc.save('Spec_Sheet.pdf');

https://jsfiddle.net/x3x0e6ws/51/

所有图片均来自本地服务器。我对每个元素都有一个最小高度，我什至尝试在 div 中添加文本以强制高度。

我该如何补救？

谢谢，

【问题讨论】：

标签： javascript jspdf html2canvas

【解决方案1】：

首先，非常感谢jsfiddle。其次，你非常接近......只需将你的 doc.save 移动到你的 html2canvas 回调中。

解释原因：

当您调用 html2canvas 时，这是一个“异步”调用。这就是为什么函数的第二个参数是“回调”的原因。代码在实际完成渲染或添加canvas 元素之前继续下一行（在您的情况下为doc.save）！稍后，当画布渲染完成时，代码html2canvas 代码返回回调，并将图像添加到您（已保存的）pdf...！

var doc = new jsPDF('p', 'pt','a4',true);
doc.setFontSize(16);
doc.setTextColor(80, 77, 78);
doc.text(15, 2, 'should be an image under here'); 
html2canvas($("#prod"), {
    useCORS : true,
    onrendered: function(canvas) {
       var imgData = canvas.toDataURL('image/jpeg');

       doc.addImage(imgData, 'JPEG', 15, 0, 34, 37);
       console.log(imgData);
       $('#prod').append(canvas);
       doc.save('Spec_Sheet.pdf');
    }
});

【讨论】：

是的！谢谢你。很好的答案和解释。