I am having a super strange error occur when using html2Canvas to print a PDF. Once the function is called, it immediately throws an error:
"807ms html2canvas: Error finding the DIV in the cloned document"
Upon calling the function again, immediately after, everything works as expected. This is ONLY occurring in the Production Build of react, making this issue difficult to debug.
Function in question:
async generateAllPdf(PDFStructure) {
this.setState({
generatingPDF: true
})
const doc = new jsPDF('p', 'mm', 'letter', true);
let ids = [];
for (let k = 0; k < PDFStructure.length; k++) {
ids.push(PDFStructure[k].ref);
}
const length = PDFStructure.length;
for (let i = 0; i < length; i++) {
let percent = Math.floor((i / length)*100) + '%'
this.handleProgress(percent)
const chart = document.getElementById(ids[i]);
// excute this function then exit loop
await html2Canvas(chart, { scale: 3, useCORS: true }).then((canvas) => {
const imgData = canvas.toDataURL('image/jpeg',0.5);
//doc.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 10, 50, 200, 150);
doc.addImage(imgData, 'JPEG', 0, 22.6, 216, 279.4, undefined, 'FAST');
if (i < (length - 1)) {
doc.addPage();
}
});
}
this.setState({
generatingPDF: false
})
doc.save("MCX-" + Moment().format('YYYY-MM-DD') + ".pdf");
}