How to fix content cut off issues in jspdf ?

[dhanushkumarsivaji]

I am using jspsf and html2canvas to convert the components into a PDF.

Below is the code for that,

  function generatePDF() {
    const input = document.getElementById("pdf");
    html2canvas(input, {
      logging: true,
      letterRendering: 1,
      scale: 2,
      windowWidth: 1440,
      useCORS: true
    }).then((canvas) => {
      var imgData = canvas.toDataURL("image/png");
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = (canvas.height * imgWidth) / canvas.width;
      var heightLeft = imgHeight;
      var doc = new jsPDF("p", "mm");
      var position = 0;
      doc.addImage(imgData, "jpeg", 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, "jpeg", 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }

      const pages = doc.internal.getNumberOfPages();

      for (let j = 1; j < pages + 1; j++) {
        let horizontalPos = imgWidth / 2; //Can be fixed number
        let verticalPos = pageHeight - 10; //Can be fixed number
        doc.setPage(j);
        doc.setFontSize(10);
        doc.text(`${j} of ${pages}`, horizontalPos, verticalPos, {
          align: "center" //Optional text styling});
        });
      }

      doc.save("output.pdf");
    });
  }

is there any way to fix this issue? Please help me to solve this one.

Here you can get the working demo link - https://codesandbox.io/s/react-component-to-pdf-goe-page-cutting-3rnl29?file=/src/App.js:412-1697

[dhanushkumarsivaji]

@eKoopmans we require your help on this

[glebov21]

I think you need add bottom margin to heightLeft

[dhanushkumarsivaji]

yes, but the values and charts might get added based on the API data. Its a dynamic component

[cljaray]

Hi there, I've been working on the same problem. You could checkout css properties break-after and break-before using print media query to force an element into the next page.

[dhanushkumarsivaji]

Hi @cljaray, Thanks for the comment. Do you have any working examples?

[cljaray]

Not at the moment, because I'm still working on it.
But you could try to wrap the elements you want on the next page in a div with the following class

CSS
@media print { .documentToPdf { break-before: always; } }

You could also wrap the elements before the one you want on the next page with the following class

CSS
@media print { .documentToPdf { break-after: always; } }

I'm sorry i don't have the working example, but as I said, I'm working on it too.

Please note that

[dhanushkumarsivaji]

Thanks for helping @cljaray

[AnthonyPhan]

We tried adding the css class but it does not cause a page break.

[guio12]

Did anyone find a solution ?

[ChamkhiAnas]

@cljaray @AnthonyPhan @guio12 @dhanushkumarsivaji
did u guys found any solution for this problem ?

[AnthonyPhan]

Unfortunately not, we ended up using a paid library instead.

[ChamkhiAnas]

@AnthonyPhan can u give me the name of the paid library ?

[AnthonyPhan]

https://docs.telerik.com/kendo-ui/framework/pdf/overview

Worked really well and the generated PDF is much smaller, however it's very expensive.

[github-actions]

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.