分頁符在nodejs中的html-pdf轉換器中不起作用
[英]page-break not working in html-pdf coverter in nodejs
問題描述
我正在使用 html-pdf 2.2.0 模塊在 pdf 中轉換我的 html。 我正在使用具有多行的表，因此我想使用分頁符，因此單行不會分成兩頁，但是在將其轉換為 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 時，它不起作用。
4 個解決方案
解決方案1
1 2021-04-30 14:59:02
我建議使用tr, td { page-break-inside: avoid; } tr, td { page-break-inside: avoid; }以防止行和單元格內的中斷。
解決方案2
1 2021-05-06 18:51:27
我建議在 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
很難找到好的 package 或 API 可以在保留所有布局的同時將事物轉換為 PDF。 我花了很多時間調查並嘗試了很多不同的解決方案（直接將 HTML 轉換為 PDF，轉換為 DOCX，然后從 DOCX 轉換為 PDF...）。 我建議您查看在線轉換工具（其中大多數是免費的，您可以非常快速地使用它們，您只需上傳文件，他們會給您一個 PDF 供您下載）。 如果您只需要將這個 html 文件轉換為 go 的最佳方法（因為其中一種工具可能會以正確的方式轉換它）。 如果您需要它作為一項功能，那么您可以向為您工作的轉換器提供商詢問 API 訪問權限。
通常，當您將 PDF 轉換為 HTML 時，它可以正常工作，但是當您嘗試將其轉換回來（即使是相同的 HTML）時，它看起來與原始文件不同。 根據我的經驗，最好的映射是在 PDF 和 DOCX 文件之間。 因此，也許您可以考慮先將 HTML 轉換為 DOCX，然后再將 DOCX 轉換為 PDF。 有 npm 軟件包可以同時執行這兩種操作，因此您可以檢查它們（或考慮再次檢查在線轉換工具）。
解決方案4
-1 2022-01-08 01:25:41
不幸的是，在節點中使用一些庫將 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>
...
不幸的是，這可能會取消配置表格的布局，並且需要調整 css 以保持對齊，但這是我能夠在 pdf 庫的節點中解決問題的唯一方法
浮動的HTML / CSS打印分頁符不起作用（例如：引導程序）
[英]HTML/CSS printing page-break with float not working (eg: bootstrap)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.