I'm encountering an issue while attempting to pass Image data to the addImage function. I have tried downgrading the versions of jspdf and html2canvas, as well as experimenting with different ways to import the two libraries, but the problem still persists.
Here is the code snippet:
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');
});
}
Here is the 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>