首页 文章

jsPDF＆html2canvas没有将图像写入pdf

提问于
浏览 次
2

使用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 回答

  • 5

    首先，非常欣赏jsfiddle . 其次，你非常接近......只需在你的html2canvas回调中移动你的doc.save .

    解释原因：

    当你调用html2canvas时，这是一个"asynchronous"调用 . 这就是为什么函数的第二个参数是"callback" . 在实际完成渲染或添加 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');
    }
});
    回复于

相关问题