分页符在nodejs中的html-pdf转换程序中不起作用
问题描述 投票：0回答：5
下面是代码示例
<!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 时，它不起作用。
5个回答
0
投票
投票
很难找到可以在保留所有布局的同时将内容转换为 PDF 的好包或 API。我花了很多时间调查并尝试了很多不同的解决方案（直接将 HTML 转换为 PDF，转换为 DOCX，然后从 DOCX 转换为 PDF...）。我建议你检查在线转换工具（大多数都是免费的，你可以很快地使用它们，你只需要上传文件，他们会给你一个 PDF 文件供你下载）。如果您只需要转换这个 html 文件，那么这是最好的方法（因为其中一种工具可能会以正确的方式转换它）。如果您需要它作为一项功能，那么您可以向为您工作的转换器提供商请求 API 访问。
通常，当您将 PDF 转换为 HTML 时，它工作正常，但是当您尝试将其转换回来（即使是相同的 HTML）时，它看起来将与原始版本不同。根据我的经验，最好的映射是在 PDF 和 DOCX 文件之间。因此，也许您可以考虑先将 HTML 转换为 DOCX，然后再将 DOCX 转换为 PDF。有一些 npm 包可以同时执行这两种操作，因此您可以检查它们（或考虑再次检查在线转换工具）。
0
投票
投票
我建议使用
tr, td { page-break-inside: avoid; }0
投票
投票
这就是我想出来的
<style>
@media print {
.page-break {
page-break-before: always;
}
}
</style>
<table>
<thead>
<tr>
<th>Index</th>
</tr>
</thead>
<tbody>
<% data.forEach((itm, index) => { %>
<tr>
<td><%= index + 1 %></td>
</tr>
<% if ((index + 1) % 5 === 0) { %> <!-- This will apply page break after every 5 entry on a page -->
</table>
<div class="page-break"></div>
<table>
<% } %>
<% }) %>
</tbody>
-1
投票
投票
我建议使用下面的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>
-1
投票
投票
不幸的是，这种情况是在 Node 中使用一些库将 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 库节点中问题的唯一方法
最新问题
- 如何在Android Kotlin中每5秒致电API？
- Sci-kit学习：研究错误分类的数据
- 如何从C＃中的QueryPerformancecount
- 不能将ApplicationSights的度量添加到Azure
- 我如何禁用，在键入点（。）视觉工作室后会自动打印fileStyleUriparSer？ 不要误会我的意思，我想要这些建议，但我不希望Visual Studio自动
- 我有一个vba excel模型，我将其分为两个单独的工作簿： 包含模型的所有输入的InputswB， RunnerWB，其中包含大部分VBA代码（以及所有
- 在bash中``读''的目的是什么？您如何使用它？
- 如何在C＃中为帐户中创建持久字典？
- 如何从另一个数组的值中生成一个随机数组，其值的总和在预定的范围内？ 我有一系列正整数，例如[10,25,40,55,80,110]。 我想能够指定一个范围，例如100-150，并从此预先存在的数组中生成一个新数组，其中新的
- 如何支持更改登录电子邮件与Auth0
- 我正在尝试将JS文件保存在Chrome覆盖文件的指定文件夹中，并且每当我按右键单击然后单击“保存为覆盖”时，该文件就不会保存在文件夹中。 \
- 以下反应组件之间有什么区别？ [重复]
- 我们如何在角度测试httpresource？ 我喜欢Angular的新httpresource，它做了很多我很久以来一直想要的事情。它确实可以使生活更轻松。 但是，我在用茉莉花测试httpresource时遇到麻烦...
- 如何在.NET应用程序中访问GCP Secret Manager，并配置了代理？ 我在Google Cloud Run上托管了一个.NET应用程序，需要访问GCP Secret Manager。我的应用程序可以正常工作，但是当我使用环境变量设置代理时（http ...
- 每个子图旁边的传说，python
- 将GhostPCL与图像转换为PDF
- 我有一个IoT中心和用Python编写的Azure函数应用程序。我希望Azure功能能够触发Hub收到的消息。
- 在运行Django测试之前，加载SQL转储
- 如何在我的React节点项目中添加自定义HLS依赖关系的正确方法？ 我想从https://github.com/video-dev/hls.js修改来源，然后将其添加到我的项目中。 我下载了https://github.com/video-dev/hls.js消息来源，进行了一些更改，并运行了NPM Run Build。 t ...
- 有人可以在MaxScript中解释struct定义内部的结构定义。
© www.soinside.com 2019 - 2025. All rights reserved.