分页符在nodejs中的html-pdf转换器中不起作用
[英]page-break not working in html-pdf coverter in nodejs
问题描述
I am using html-pdf 2.2.0 module to convert my html in pdf.
我正在使用 html-pdf 2.2.0 模块在 pdf 中转换我的 html。 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.我正在使用具有多行的表，因此我想使用分页符，因此单行不会分成两页，但是在将其转换为 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.使用简单的 HTML 打印代码（CTRL + P）时，它看起来不错，但是当将其转换为 pdf 时，它不起作用。
4 个解决方案
解决方案1
1 2021-04-30 14:59:02
I would recommend to use tr, td { page-break-inside: avoid; }我建议使用tr, td { page-break-inside: avoid; } tr, td { page-break-inside: avoid; } to prevent breaks inside rows and cells. tr, td { page-break-inside: avoid; }以防止行和单元格内的中断。
解决方案2
1 2021-05-06 18:51:27
I would recommed below css to fix this我建议在 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>
解决方案3
0 2021-04-30 14:54:35
It is really hard to find the good package or API that can convert things to PDF while keeping all the layout.很难找到好的 package 或 API 可以在保留所有布局的同时将事物转换为 PDF。 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...).我花了很多时间调查并尝试了很多不同的解决方案（直接将 HTML 转换为 PDF，转换为 DOCX，然后从 DOCX 转换为 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).我建议您查看在线转换工具（其中大多数是免费的，您可以非常快速地使用它们，您只需上传文件，他们会给您一个 PDF 供您下载）。 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).如果您只需要将这个 html 文件转换为 go 的最佳方法（因为其中一种工具可能会以正确的方式转换它）。 If you need it as a feature, then you can ask the provider of convertor that worked for you for an API access.如果您需要它作为一项功能，那么您可以向为您工作的转换器提供商询问 API 访问权限。
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.通常，当您将 PDF 转换为 HTML 时，它可以正常工作，但是当您尝试将其转换回来（即使是相同的 HTML）时，它看起来与原始文件不同。 From my experience, the best mapping is between PDF and DOCX files.根据我的经验，最好的映射是在 PDF 和 DOCX 文件之间。 So maybe you can consider to convert you HTML to DOCX first, and then convert DOCX to PDF.因此，也许您可以考虑先将 HTML 转换为 DOCX，然后再将 DOCX 转换为 PDF。 There are npm packages that can do both so you can check them (or consider checking online converting tools agian).有 npm 软件包可以同时执行这两种操作，因此您可以检查它们（或考虑再次检查在线转换工具）。
解决方案4
-1 2022-01-08 01:25:41
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.不幸的是，在节点中使用一些库将 html 转换为 pdf 会发生这种情况，它甚至被视为报告的错误，到目前为止它似乎没有解决方案，但是，有办法解决这个问题。
If instead of creating several columns and rows, create them all as a table and apply this to CSS:如果不是创建多个列和行，而是将它们全部创建为一个表并将其应用于 CSS：
table, tr, td { page-break-inside: avoid; }
will solve the problem.将解决问题。
Example how create table to solve the problem in HTML:示例如何创建表来解决 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>
...
Unfortunately this may deconfigure your layout for the table and will need tweaking the css to stay aligned, but it was the only way I was able to solve the problem in node of the pdf libs不幸的是，这可能会取消配置表格的布局，并且需要调整 css 以保持对齐，但这是我能够在 pdf 库的节点中解决问题的唯一方法
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.