jsPDF和html2canvas无法将图片写入PDF

Question

使用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中添加文本以强制设置高度。

我该如何解决这个问题？

谢谢。

- Peter Gibbons

Answer 1

首先，非常感谢jsfiddle。 其次，你很接近了...只需将doc.save移动到html2canvas回调函数内部即可。

为了解释原因： 当你调用html2canvas时，这是一个“异步”调用。这就是为什么函数的第二个参数是“回调”的原因。在代码继续执行下一行（在你的情况下，是doc.save）之前，它实际上还没有完成渲染或添加canvas元素！稍后，在某个时间点，html2canvas代码返回到回调函数中，当canvas渲染完成后将图像添加到已保存的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');
    }
});

- Cody Ｇ

---

是的！谢谢。非常好的答案和解释。 - Peter Gibbons