Data gets duplicated on page break using html2canva and jsPDF

Question

On page break, section's data get duplicated and also when downloaded using mobile (iphone/safari), the jsPDF does not download the file

const accordionTable = document.createElement('div');
ReactDOM.render(<ReportMainPDF repdata={response.data} />, accordionTable);
document.body.appendChild(accordionTable)
html2canvas(accordionTable, { logging: true, scale:2, allowTaint: true, useCORS: true }).then((canvas) => {
  const imgWidth = 208;
  const pageHeight = 295;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;
  heightLeft -= pageHeight;
  const doc = new jsPDF('p', 'mm');
  doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
  while (heightLeft >= 0) {
     position = heightLeft - imgHeight;
     doc.addPage();
     doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
     heightLeft -= pageHeight;
  }

  const filename = 'test.pdf';
  doc.save(filename);
  ReactDOM.unmountComponentAtNode(accordionTable);

  // Remove the accordionTable from the DOM
  accordionTable.remove();
  setIsLoading(false)
 });

I also tried html2pdf, but the report gets zoomed in not fitting the content to the page Also when using html2pdf, downloaded report from mobile return empty 7 pages

Answer 1

The jsPDF default format is A4. The height of A4 is 297. I can see that in the code pageHeight is 295. For that you can see duplicated content.