Issue With Page Break,images are cut off in between.

[apoorv28]

Hi everyone, i have added my code for downloading pdf in this i have a dashboard object from which i have calculated height of each div which needs to be printed on pdf,

const imageWidth = element.scrollWidth; const a4Width = 595; // A4 width in pixels const a4Height = 842; // A4 height in pixels const scale = a4Width / imageWidth; console.log('scale: ', scale);

const filter = (node: HTMLElement) => {
  const exclusionClasses = [
    'filters flex-10',
    'gridster-list',
    "tester-info-filters-list filters-list flex-15",
    "filters tester-info-filters flex-10"
  ];
  return !exclusionClasses.some((classname) => node.classList?.contains(classname));
};

const imageDataUrl = await htmlToImage.toPng(element, { width: imageWidth, height: element.scrollHeight, filter });
const image = new Image();
image.src = imageDataUrl;
await image.decode();

const pdf = new jsPDF({
  orientation: 'portrait',
  unit: 'px',
  format: [a4Width, a4Height]
});

let yOffset = 0;
let pageYOffset = 0;

for (let i = 0; i < calculatedHeight.length; i++) {
  const chartHeight = calculatedHeight[i].chartHeight;

  if (pageYOffset + chartHeight * scale > a4Height) {

    pdf.addPage();
    pageYOffset = 0;
  }

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imageWidth;
  canvas.height = chartHeight;
  console.log('chartHeight: ', chartHeight);

  ctx.clearRect(0, 0, imageWidth, chartHeight);
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, imageWidth, chartHeight);
  ctx.drawImage(image, 0, yOffset, imageWidth, chartHeight, 0, 0, imageWidth, chartHeight);
  const blob = await new Promise<Blob>(resolve => canvas.toBlob(resolve, 'image/png'));
  saveAs(blob, `cool$[i]`);

  const imageDataURL = canvas.toDataURL('image/png');

  pdf.addImage(imageDataURL, 'PNG', 0, pageYOffset, a4Width, chartHeight * scale);
  console.log('pdf: ', pdf);

  yOffset += chartHeight;
  pageYOffset += chartHeight * scale;
}
pdf.save(pdfName);

} calculated height of each div

[ { "chartHeight": 76, "chartHeightInPoints": 57, "chartHeightFromTop": 2,

},
{
    "chartHeight": 251,
    "chartHeightInPoints": 188.25,
    "chartHeightFromTop": 88,

},
{
    "chartHeight": 566,
    "chartHeightInPoints": 424.5,
    "chartHeightFromTop": 380,

},
{
    "chartHeight": 565,
    "chartHeightInPoints": 423.75,
    "chartHeightFromTop": 992,

},
{
    "chartHeight": 565,
    "chartHeightInPoints": 423.75,
    "chartHeightFromTop": 1557,

},
{
    "chartHeight": 619,
    "chartHeightInPoints": 464.25,
    "chartHeightFromTop": 2122,

},
{
    "chartHeight": 780,
    "chartHeightInPoints": 585,
    "chartHeightFromTop": 2741,

},
{
    "chartHeight": 565,
    "chartHeightInPoints": 423.75,
    "chartHeightFromTop": 3570,

},
{
    "chartHeight": 565,
    "chartHeightInPoints": 423.75,
    "chartHeightFromTop": 4135,
    "chartName": "C4: Test Parameter Pass/Fail Results (Open,Short,nVTEP)",
    "chartType": "BarChart"
},
{
    "chartHeight": 619,
    "chartHeightInPoints": 464.25,
    "chartHeightFromTop": 4700,

},
{
    "chartHeight": 780,
    "chartHeightInPoints": 585,
    "chartHeightFromTop": 5319,

}

]

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.