html2pdf如何防止表格行中途断线

问题描述 投票：0回答：2

我正在尝试使用 html2pdf 将 HTML 页面下载为 PDF，但是如果表格的内容太长，它往往会在中途破坏 TR。

这个问题有什么解决办法吗？

尝试过的解决方案（没有成功）

解决方案＃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
        }
    };

解决方案#2：添加分页符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;

    }

解决方案 #3：` 分页符：{

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

但是，表格行仍然跨 2 页，如下图所示。

html css pdf html2canvas html2pdf
2个回答
4
投票

简介

我们将以下版本视为当前版本：

  • html2pdf.js
    ：
    0.10.1
    。

解决方案

默认分页模式：

['css', 'legacy']
。

添加

avoid-all
分页模式解决了问题：

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

请参阅文档部分：html2pdf.js |使用纯 JS 进行客户端 HTML 到 PDF 渲染。 |选项|分页符。

测试证据

应用解决方案后草拟 HTML 页面示例 (
index.html
)

请适当地记下并解决 TODO 注释。

<!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>

使用溶液之前

涂抹溶液后

其他参考资料

另一个例子：

0
投票
这里的问题是@0.9.0版本的html2pdf不支持分页选项，所以请更新您的html2pdf版本或@0.10.1版本这将起作用

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.