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 ?

[dhanushkumarsivaji]

Hi @cljaray, are you able to fix this problem?

[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[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.

[igagandeep]

I wanted to share a solution I found for a common issue with jsPDF where text gets cut off at the end of a page when generating a PDF from HTML content. This can be particularly troublesome when dealing with dynamic or lengthy content.

After experimenting with various settings, I found a combination that works well to prevent text from splitting inappropriately across pages.

Here's the function I used to generate the PDF:

function downloadPdf() { let jsPdf = new jsPDF('p', 'pt', 'letter'); var htmlElement = pdfRef.current; // Reference to the HTML content which i wanna shown in pdf

const opt = {
    callback: function (jsPdf) {
        jsPdf.save("Test.pdf");
    },
    margin: [20, 20, 20, 20], // Set appropriate margins
    autoPaging: 'text', // Crucial for handling text flow across pages
    html2canvas: {
        allowTaint: true,
        letterRendering: true,
        logging: false,
        scale: 0.4, // Adjust the scale to fit content
    }, 
};

jsPdf.html(htmlElement, opt);

}

Key Points:

The autoPaging: 'text' option in jsPDF was particularly useful to ensure the text flows correctly from one page to another.

Adjusting the scale in html2canvas options helped fit the content properly within the PDF pages.

This approach worked well for my use case with dynamic content. I hope this solution helps others who are struggling with similar issues in jsPDF. Feel free to tweak the settings to suit your specific needs!