jsPDF错误:PNG文件不完整或损坏"

Question

当试图将图像数据传递给addmage函数时，我有这个错误，我试图降级jspdf和html2canvas版本，但这仍然发生，我试着用许多不同的方式导入这两个库，但我仍然面临这个问题

这是我的代码

export() {
console.log('printing');
const data = document.getElementById('reportContent');
this.generatePDF(data);
}
generatePDF(htmlContent) {
html2canvas(htmlContent).then(canvas => {
const imgWidth = 290;
const imgHeight = (canvas.height * imgWidth / canvas.width);
const contentDataURL = canvas.toDataURL('image/png');
const pdf = new jsPDF('l', 'mm', 'a4');
const position = 10;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
pdf.save('report.pdf');
});
}

这是HTML

<div #reportContent style="display: none;" id = "reportContent"> 
<table>
<tr>
<td style="color: red;background-color: blue;">1111
</td>
<td>2222
</td>
</tr>
</table>
</div>

Answer 1

我解决了这个问题，它发生是因为使用display:none;在HTML我这样更新了这个函数:

export() {
console.log('printing');
const data = document.getElementById('reportContent');
data.style.display = "block";
this.generatePDF(data);
data.style.display = "none";
}

你不能打印隐藏的画布。