我停止尝试让 HTML 为打印分页（最终成功了）

Source: Dev.to

基础问题

几个月来，我一直在与许多开发者熟悉的一个问题作斗争：在多页打印 HTML 内容时保持布局不被破坏。和很多人一样，我尝试了常见的做法：

• CSS page-break-*
• @print 媒体查询
• 无头浏览器
• HTML → PDF 生成器

它们在一定程度上有效。但只要内容稍微复杂、动态或可编辑，问题就会接踵而至：页面断点不可预测、元素被截断、边距不一致，出现大量孤行和寡行（widows and orphans）。

转折点

有一次，我不再尝试“说服” HTML 正确分页。与其裁剪内容，我反向思考：如果每一页仅仅是对更大、连续内容的一扇窗口会怎样？于是我把通常紧密耦合的两项职责分离开来：

• 内容渲染
• 分页

不同的做法

具体来说，思路是先在 CSS 中创建一个逻辑的 A4 页面，作为对更大 HTML 文档的窗口，然后根据需要复制该页面。每一页通过垂直偏移动态显示同一内容的不同部分，制造出统一的多页文档的幻象。内容从未被“强行”拆分或随意切割：它只是通过连续的窗口被观察，而窗口的大小和周围的元数据可以完全控制。屏幕上看到的并不完全等同于打印出来的内容——这正是有意为之。

这带来的变化

这种分离实现了：

• 稳定且可预测的多页输出
• 在打印前文档仍保持完全可编辑
• 即使面对复杂内容也能实现确定性的分页

实现本身在技术上刻意保持简洁（纯原生 JavaScript），但它依赖于一种根本不同的思考方式。

PS：请注意，此方法已被专利覆盖。我在此提前说明，以免对其使用产生任何误解。