我正在使用html2canvas和jsPdf从HTML为一个React应用程序生成Pdf。
点击我的下载按钮后,我将其称为:
printDocument() {
const input = document.getElementById('divToOfferInfo');
const pdf = new jsPDF();
if (pdf) {
html2canvas(input, {
useCORS: true
})
.then(canvas => {
const imgData = canvas.toDataURL('image/png');
console.log(imgData); //Maybe blank, maybe full image, maybe half of image
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('download.pdf');
});
}
}
结果是完全随机的。画布的结果为完整,一半或空白,但不正确。
我认为这个问题与React的渲染有关。
感谢您的帮助。
答案 0 :(得分:0)
我找到了替代解决方案。代替使用html2canvas lib,我们可以使用dom-to-image lib。它正在使用它。
import domtoimage from 'dom-to-image';
...
printDocument() {
const input = document.getElementById('divToOfferInfo');
const pdf = new jsPDF();
if (pdf) {
domtoimage.toPng(input)
.then(imgData => {
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save('download.pdf');
});
}
}
答案 1 :(得分:0)
您可以像这样使用。我正在使用此代码,并且运行良好。
savePDF() {
const printArea = document.getElementById("printWrapper");
html2canvas(printArea).then(canvas => {
const dataURL = canvas.toDataURL();
const pdf = new jsPDF();
pdf.addImage(dataURL, 'JPEG', 20, 20, 180, 160);
pdf.save('saved.pdf')
})
}