css - 分页符在nodejs中的html-pdf转换器中不起作用

Question

我正在使用 html-pdf 2.2.0 模块将我的 html 转换为 pdf。我正在使用具有多行的表格，所以我想使用分页符，因此单行不会分成两页，但在将其转换为 pdf 时它不起作用。

下面是代码示例

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

使用简单的 HTML 打印代码（CTRL + P）时，它看起来不错，但将其转换为 pdf 时它不起作用。

score 0 · Accepted Answer

我会推荐下面的css来解决这个问题

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

score 0 · Accepted Answer

0

我建议使用它tr, td { page-break-inside: avoid; }来防止行和单元格内的中断。

于 2021-04-30T14:59:02.797 回答

score -1 · Accepted Answer

很难找到可以在保留所有布局的同时将内容转换为 PDF 的好的包或 API。我花了很多时间调查并尝试了很多不同的解决方案（直接将 HTML 转换为 PDF，转换为 DOCX，然后从 DOCX 转换为 PDF ......）。我建议您检查在线转换工具（其中大多数是免费的，您可以非常快速地使用它们，您只需上传文件，他们会给您一个 PDF 文件供您下载）。如果您只需要转换这一个 html 文件，那是最好的方法（因为其中一种工具可能会以正确的方式转换它）。如果您需要它作为一项功能，那么您可以向为您工作的转换器提供商询问 API 访问权限。

通常当您将 PDF 转换为 HTML 时，它可以正常工作，但是当您尝试将其转换回来（即使是相同的 HTML）时，它看起来与原始文件不同。根据我的经验，最好的映射是在 PDF 和 DOCX 文件之间。所以也许你可以考虑先把你的HTML转换成DOCX，然后再把DOCX转换成PDF。有 npm 包可以同时执行这两种操作，因此您可以检查它们（或考虑检查在线转换工具 agian）。

score -1 · Accepted Answer

不幸的是，这是使用一些库在节点中将 html 转换为 pdf 时发生的，它甚至被视为已报告的错误，到目前为止似乎还没有解决方案，但是，有办法解决这个问题。

如果不是创建多个列和行，而是将它们全部创建为一个表并将其应用于 CSS：

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

将解决问题。

示例如何创建表格以解决 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>
...

这是我能够解决 pdf 库节点中的问题的唯一方法

css - 分页符在nodejs中的html-pdf转换器中不起作用

4 回答 4

Related

Reference