Lalit Baghel

Software Developer

14th January, 2023

Fixing the Issue of Cut-off Content in HTML to PDF Conversion with html2pdf.js

When converting HTML to PDF using html2pdf.js, it is not uncommon for certain elements of the HTML to get cut off when rendered in the PDF document. This can be a frustrating issue, as it can make important information or design elements in the HTML document unreadable or incomplete in the PDF. However, there are a few ways to fix this issue and ensure that all of the content in the HTML document is properly displayed in the PDF.

One solution is to use the CSS property "page-break-before" on a specific HTML tag. This property allows you to force a page break before a specific element, ensuring that the content following the tag is not cut off. For example, if you have a large table that is getting cut off in the PDF, you can add the "page-break-before" property to the <table> tag to ensure that the table starts on a new page in the PDF document.

<style>
  table {
    page-break-before: always;
  }
</style>

<table>
  <!-- table content -->
</table>

Another solution is to use JavaScript to dynamically add a page break based on the height of the content of the document. By comparing the height of the content to the height of the viewport, you can determine if a page break is necessary and add one before the content gets cut off.

if (document.body.offsetHeight > window.innerHeight) {
  var pageBreak = document.createElement("div");
  pageBreak.style.pageBreakBefore = "always";
  document.body.appendChild(pageBreak);
}

It is also important to check the size of the PDF document which is rendering, it could be possible that your PDF size is not set to A4, which means the cut off issue is not related to content but the size of the pdf, you can set the size of pdf by using

html2pdf(document.body, {
    margin:       1,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { dpi: 192, letterRendering: true },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
});

It is important to note that these solutions are not a one-size-fits-all solution and may not work for every HTML document. It may take some experimentation and tweaking of the CSS or JavaScript code to find the best solution for your specific use case.

Here is an example of a complete code that demonstrates how to fix the issue of cut-off content in HTML to PDF conversion using html2pdf.js and JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Fix Cut-off Content in HTML to PDF Conversion using html2pdf.js</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jspdf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/html2pdf.js"></script>
  <style>
    /* Add page break before specific elements */
  <style>
    /* Add page break before specific elements */
    table {
      page-break-before: always;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
    </tr>
    <!-- more rows of table content -->
  </table>
  <div id="content">
    <p>Some more content that may be cut off in the PDF</p>
    <p>Additional text that could be cut off in the PDF</p>
  </div>
  <script>
    // Check if content is taller than viewport
    if (document.body.offsetHeight > window.innerHeight) {
      // Create page break element
      var pageBreak = document.createElement("div");
      pageBreak.style.pageBreakBefore = "always";
      // Add page break element to the bottom of the content
      document.getElementById("content").appendChild(pageBreak);
    }

    // convert html to pdf with pdf size A4
    html2pdf(document.body, {
        margin:       1,
        filename:     'myfile.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { dpi: 192, letterRendering: true },
        jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
    });
  </script>
</body>
</html>

In conclusion, when converting HTML to PDF using html2pdf.js, it is important to keep in mind that certain elements of the HTML may get cut off in the PDF document. To fix this issue, you can use the "page-break-before" CSS property to force a page break before specific elements, or use JavaScript to dynamically add a page break based on the height of the content. Additionally, ensure that the pdf size is set to A4, which is standard size for print, if it's not set then it could be the reason for the cut off issue.

Lalit Baghel

Related Tutorial

Difference Between Synchronous and Asynchronous Functions in JavaScript.

About us

Find Online Tools

Quick links

Social links

Other