这些区间表示：分页线不应该穿过这段可见内容。

实际实现见 text-range.ts。这里的行高补偿是基于 CSS 行高的近似计算，并不是完整重建浏览器的 line box。

3. 安全断点计算

完成测量后，分页算法不再依赖 DOM。

输入只有三个核心参数：

• 文档总高度 height

• 单页可用高度 capacity

• 需要保护的区间 protectedRanges

采用贪心分页策略，先尝试当前页面能够容纳的最大高度。如果断点落入受保护区间，就向前回退到该区间起点。

核心逻辑可以简化为：

let end = Math.min(start + capacity, height);


// 如果分页线穿过受保护区域
if (range.top < end && range.bottom > end) {
  end = range.top;
}

实际实现会先排序、合并重叠区间，再通过游标逐页推进，避免每一页重复扫描全部区间。

完整算法见 paginator.ts。

这套设计的关键是：分页计算只产生坐标，不通过插入空白节点来改变原有 DOM 的布局。

二、视觉保真：分页不能反过来改变页面

解决了截断问题，接下来又遇到另一个问题：分页正确，不代表导出后的页面看起来正确。

真实业务页面可能有 Flex、Grid、自动宽度、嵌套容器、滚动区域，以及 fixed、sticky 等定位方式。

如果直接把 DOM 移动到新的打印容器，很容易触发重新布局（Reflow），造成元素宽度、文字换行和位置变化。

Web Printer 3.0 的解决方案是建立一个离屏打印快照（Print Snapshot）。

主要处理包括：

1. 等待字体、图片等资源就绪，避免在临时布局状态下测量。

2. 克隆需要打印的 DOM，复制计算后的 CSS 样式。

3. 锁定打印根元素宽度，尽可能保留原有换行与布局。

4. 复制表单当前值、Canvas 内容和内部滚动状态。

将 fixed、sticky 等定位状态冻结为快照中的当前几何位置。

之后，测量、分页和截图都基于同一份快照进行。

这样可以避免分页计算和实际渲染使用不同布局，也不会直接修改业务页面。

相关代码位于 snapshot.ts。

3.0 还移除了旧版分页规则中的 ignore 分类，避免分页引擎默认删除某些元素而改变布局。需要打印什么内容，优先由调用方选择打印根节点来确定。

这里的“所见即所得”是一个尽量保持打印视图几何与样式的设计目标，而不是保证能够还原任意网站的所有 CSS 特性。

三、长文档：从一次性超长截图改为逐页渲染

传统整页截图方案还有一个限制：Canvas 的尺寸并不是无限的。

当 HTML 文档很长时，一次性生成超大 Canvas，可能触及浏览器的最大尺寸或内存限制，最终导致空白 PDF。

Web Printer 把测量分页与 Canvas 渲染分离。

整个流程变成：

DOM 快照 → 布局测量 → 分页计划 → 逐页 Canvas → PDF / PNG

先生成所有分页区间，再逐页执行截图：

for (const page of pages) {
  const canvas = await capture(
    root,
    page.start,
    page.end - page.start
  );


  try {
    await writer.addPageSlice(
      index,
      canvas,
      pageHeight
    );
  } finally {
    release(canvas);
  }
}

npm install @darialan/web-printer