html2pdf how to prevent table row from breaking midway
Andrew Henderson 
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.
2 Answers
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="" 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> <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.
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.
