Yeo Bryan
Yeo Bryan

Reputation: 429

html2pdf how to prevent table row from breaking midway

I am trying to use html2pdf to download the HTML page as PDF however if the content of the table is too long, it tends to break the TR midway through.

Any solutions for this issue?

enter image description here

Attempted Solutions (None worked)

Solution #1: pagebreak: { avoid: ['tr', 'td'] }

var opt = {
        margin: 0.5,
        filename: dashboard_name + '_' + client_name + '.pdf',
        pagebreak: { avoid: ['tr', 'td'] },
        image:        { type: 'jpeg', quality: 1 },
        html2canvas: { dpi: 192, width: $(window).width()},
        jsPDF: {
            orientation: pageOrient,
            unit: 'cm',
            format: 'a2',
            compress: true
        }
    };

Solution #2: Adding page break CSS

@media print {
            table, div   {
                break-inside: avoid;
            }
        }
    
        thead { display: table-header-group; }
        tfoot { display: table-row-group;}
        tr {
        page-break-after: always!important;
        page-break-before: always!important;
        page-break-inside: auto!important;

    }

Solution #3: ` pagebreak: {

    mode: ['avoid-all', 'css', 'legacy']
},`

However, the table row is still breaking across 2 pages as depicted in the image below. enter image description here

Upvotes: 4

Views: 12529

Answers (3)

Muhammad Waqar Anwar
Muhammad Waqar Anwar

Reputation: 440

Although @Sergey has mentioned this at the end of his answer, the actual answer that works is this dgolhar's comment on github thanks to him:

https://github.com/eKoopmans/html2pdf.js/issues/83#issuecomment-559780370

Upvotes: 0

rajesh prajapati
rajesh prajapati

Reputation: 1

here problem is that the @0.9.0 version of html2pdf doesn't support the content break option so please update your html2pdf version to @0.10.1 or the latest.

Upvotes: 0

Introduction

Let's consider the following versions as the current versions:

  • html2pdf.js: 0.10.1.

Solution

The default page-break modes: ['css', 'legacy'].

Adding the avoid-all page-break mode resolves the problem:

const opt = {
    <…>,
    pagebreak: {
        mode: ['avoid-all', 'css', 'legacy']
    },
    <…>
};

Please, refer to the documentation section: html2pdf.js | Client-side HTML-to-PDF rendering using pure JS. | Options | Page-breaks.

Test evidence

Draft example HTML page (index.html) after applying solution

Please, note and address the TODO-note appropriately.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML table</title>
        <style>
            table {
                font-family: arial, sans-serif;
                border-collapse: collapse;
                width: 100%;
            }

            td, th {
                border: 1px solid #dddddd;
                text-align: left;
                padding: 8px;
            }

            tr:nth-child(even) {
                background-color: #dddddd;
            }
        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
                integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
                crossorigin="anonymous"
                referrerpolicy="no-referrer">
        </script>
    </head>
    <body>
        <h1>HTML table</h1>

        <button onclick="printTable()">
            Print to PDF
        </button>

        <table id="long-table">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>
            <!-- TODO: Duplicate the below row many times. -->
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>

        <script defer>
            function printTable() {
                const element = document.getElementById('long-table');
                var opt = {
                    pagebreak: {
                        mode: ['avoid-all', 'css', 'legacy']
                    }
                };
                html2pdf(element, opt);
            }
        </script>
    </body>
</html>

Before applying solution

Before applying solution

After applying solution

After applying solution

Additional references

An additional example:

Upvotes: 4

Related Questions