使用jspdf和html2canvas在表配置器上拍摄用户选择配置的快照(选择顶部/侧面/层压板颜色)。它通过使用透明png改变每个图像的来源来实现。
我在将图像插入pdf时遇到问题。我可以将它附加到文档中,没有任何问题,并将文本和其他图像写入pdf而不会出现问题。我担心我的形象太大了。生成的base64输出很大。
我把它写到控制台:
git for-each-ref
https://jsfiddle.net/x3x0e6ws/51/
所有图片都来自本地服务器。我在每个元素上都有一个最小高度,我甚至尝试在div中投掷文本以强制高度。
我该如何解决这个问题?
谢谢,
答案 0 :(得分:5)
首先,非常感谢jsfiddle。 其次,你非常接近......只需在你的html2canvas回调中移动你的doc.save。
解释原因:
当你调用html2canvas时,这是一个“异步”调用。这就是为什么函数的第二个参数是“回调”。在实际完成呈现或添加doc.save
元素之前,代码将继续使用下一行(在您的情况下为canvas
)!稍后,代码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');
}
});