page-break not working in html-pdf coverter in nodejs

Question

I am using html-pdf 2.2.0 module to convert my html in pdf. I am using table with multiple rows so I want to use page-break so then a single row does not divide in two pages but its not working when converting it to pdf.

Below is the code sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
table tbody tr {
    height: 120px;
    border:5px solid red;
}
</style>
<body>
        <table border="1" style="page-break-after: always;">
        <thead>
            <tr>
                <td>AA</td>
                <td>BB</td>
                <td>CC</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>


        </tbody>
    </table>
</body>

</html>

When printing the code (CTRL + P) with simple HTML it looks fine but when converting it to the pdf it doesn't work.

@Gagantous : The original poster hasn't been logged in at Stackoverflow for nine months, so most likely we won't get a response whether out answers are helpful for him/her... — Johannes, Apr 30 '21 at 23:42
@Johannes, i have the smae problem with him, well not technically same, but similar. And i cant find any answer for this problem. — Gagantous, May 01 '21 at 00:55

NeNaD · Answer 1 · 2021-04-30T15:00:25.380

It is really hard to find the good package or API that can convert things to PDF while keeping all the layout. I spent a lot of time investigating and tried a lot of different solutions (directly convert HTML to PDF, converting to DOCX and then from DOCX to PDF...). I would suggest you to check online converting tools (most of them are free and you can use them really quickly, you just need to upload the file and they will give you a PDF back to download). If you only need to convert this one html file that is the best way to go (because one of the tools will probably convert it in the right way). If you need it as a feature, then you can ask the provider of convertor that worked for you for an API access.

Usually when you convert PDF to HTML, it works fine, but when you try to convert it back (even the same HTML) it will not look the same as original. From my experience, the best mapping is between PDF and DOCX files. So maybe you can consider to convert you HTML to DOCX first, and then convert DOCX to PDF. There are npm packages that can do both so you can check them (or consider checking online converting tools agian).

Johannes · Answer 2 · 2021-04-30T18:58:47.083

0

I would recommend to use tr, td { page-break-inside: avoid; } to prevent breaks inside rows and cells.

edited Apr 30 '21 at 18:58

answered Apr 30 '21 at 14:59

Johannes

64,305
18
73
130

score -1 · Answer 3 · answered May 06 '21 at 18:51

I would recommed below css to fix this

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:tenter code hereable-footer-group }
</style>

Samuel Costa · Answer 4 · 2022-01-08T18:38:09.263

Unfortunately, this occurs using some libs to convert html to pdf in node, it is even treated as a reported bug and so far it doesn't seem to have a solution, however, there is a way around the problem.

If instead of creating several columns and rows, create them all as a table and apply this to CSS:

table, tr, td { page-break-inside: avoid; }

will solve the problem.

Example how create table to solve the problem in HTML:

<table>
    <tr>
        <th>AA</th>
        <th>BB</th>
        <th>CC</th>
    </tr>
</table>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
...

This was the only way I was able to solve the problem in node of the pdf libs

page-break not working in html-pdf coverter in nodejs

4 Answers4

Linked