html2pdf how to prevent table row from breaking midway

Question

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?

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.

Dear @YeoBryan, Could you please provide a minimal, complete, and verifiable example, so that one can reproduce the problem? — Sergey Vyacheslavovich Brunov
– Sergey Vyacheslavovich Brunov, Commented Jul 18, 2022 at 6:33

Sergey Vyacheslavovich Brunov · Accepted Answer · 2022-07-19 05:47:30Z

5

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

After applying solution

Additional references

An additional example:

GitHub issue: text is cut in the middle · Issue #83 · eKoopmans/html2pdf.js.
GitHub comment: dgolhar commented on Nov 29, 2019.

edited Jul 19, 2022 at 5:47

answered Jul 16, 2022 at 1:10

Sergey Vyacheslavovich Brunov

18.2k7 gold badges53 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yeo Bryan Over a year ago

Thanks, will follow up on this tomorrow when I am back at work to see if it works! @SergeyVyacheslavovichBrunov

Yeo Bryan Over a year ago

The solution didnt work, the row is still breaking across 2 pages. I have updated the original post with the results of attempting this solution

Sergey Vyacheslavovich Brunov Over a year ago

Dear @YeoBryan, Thank you for the update! Requested the reproducible example (please, see the comments to the question).

Sergey Vyacheslavovich Brunov Over a year ago

Hello, @YeoBryan! I have updated the answer with a minimal and complete example. Could you please check it?

Nallib Tala Over a year ago

the problem with your solution, is the headers. It is chopping them from the long table and put it them in a separate page

Rarblack · Accepted Answer · 2023-11-04 19:05:00Z

0

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.

edited Nov 4, 2023 at 19:05

Rarblack

4,6744 gold badges24 silver badges36 bronze badges

answered Nov 4, 2023 at 5:06

rajesh prajapati

12 bronze badges

Comments

Muhammad Waqar Anwar · Accepted Answer · 2024-10-29 11:21:23Z

0

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

answered Oct 29, 2024 at 11:21

Muhammad Waqar Anwar

4406 silver badges15 bronze badges

Collectives™ on Stack Overflow

html2pdf how to prevent table row from breaking midway

Attempted Solutions (None worked)

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

Solution #2: Adding page break CSS

Solution #3: ` pagebreak: {

3 Answers 3

Introduction

Solution

Test evidence

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

Before applying solution

After applying solution

Additional references

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Attempted Solutions (None worked)

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

Solution #2: Adding page break CSS

Solution #3: ` pagebreak: {

3 Answers 3

Introduction

Solution

Test evidence

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

Before applying solution

After applying solution

Additional references

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

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

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