Print/save 页面为 PDF，但如果某个元素会被截断，则在它之前添加一个分页符

Question

我有一个页面需要打印为 PDF（保存为 PDF 或仅使用浏览器打印对话框），类似于：

div {
  outline: red solid 1px;
}
body {
    margin-left: 30vw;
    margin-right: 30vw;
}

<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br>
<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<br>
<div>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<br>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

网站的内容较长，无法放在一个页面中，因此在我尝试打印时被截断了。如果在中间被剪切，我希望在每个段之前插入一个分页符，以便在段之间只有分页符。我目前正在尝试将 html2pdf.js 与避免所有分页符模式一起使用：

html2pdf().set({
  pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }
});

但这似乎没有任何作用。我可以使用手动标记（将 class html2pdf__page-break 添加到应该在分页符之前的元素中），但我经常修改此站点，而且我不想每次都返回我对网站进行了更改，使元素变长或变短。

Answer 1

您是否尝试过使用常规 CSS 并设置

div {page-break-inside: avoid}

属性让你的 div 看看它是否避免在其中创建分页符？

https://www.w3schools.com/cssref/pr_print_pagebi.asp

Print/save 页面为 PDF，但如果某个元素会被截断，则在它之前添加一个分页符

Print/save page as PDF, but if an element would get cut off then add a page break before it

javascript

html

css

pdf

html2pdf