HTML5可视化编辑器分页应采用JS控制的块级容器方案，而非CSS分页样式；将内容拆分为带data-page-index的独立.page元素，通过display切换实现所见即所得分页，并在导出PDF前清理transform等干扰样式。
HTML5 可视化编辑器里分页不是靠 page-break 硬切
直接在富文本区域（如 contenteditable 元素）里插入 page-break-before 或 break-before: page，浏览器不会触发“分页预览”行为——因为 HTML 本身没有原生分页容器概念，CSS 分页媒体查询（@media print）只对打印生效，可视化编辑器的屏幕预览里它基本不渲染。
真正能用的方案是：把内容按逻辑切分成独立的 或带唯一 id 的块级容器，再用 JS 控制显示/隐藏，配合翻页 UI 实现“可视化分页”效果。
用 display: none/block + 索引控制是最稳的分页方式
适用于大多数基于 contenteditable 或 iframe 的可视化编辑器（如 Draft.js、Quill 衍生方案、或自研编辑器），不需要依赖 CSS 打印样式，也不受浏览器分页渲染差异影响。
- 每一页内容包裹在独立
- 初始只让
data-page-index="0"的元素display: block，其余设为display: none - 翻页时仅修改当前页索引，切换对应
data-page-index元素的display值 - 若需导出 PDF，再将所有
.page按顺序拼入一个隐藏，用window.print()或jsPDF+html2canvas截图生成
scrollIntoView 滚动分页适合长文档但不满足“所见即所得”
如果编辑器内容是一整段可滚动 DOM（比如没做块级隔离），用 scrollIntoView 模拟分页会更轻量，但用户无法直观感知“页边界”，也难对齐 A4 尺寸（96dpi 屏幕 vs 300dpi 打印）。这种方案只建议用于草稿浏览模式，不能作为正式分页设置依据。
立即学习“前端免费学习笔记（深入）”；
- 计算每页高度：常用 A4 高度为
842px（72dpi 下）或1123px（96dpi 下），但实际要根据字体、行高、边距动态测算 - 监听编辑内容变化后，重新运行分页定位逻辑：
element.scrollIntoView({ block: 'start', behavior: 'smooth' }) - 必须禁用用户手动滚动（
overflow: hiddenon container），否则滚动和分页状态会脱节 - 无法支持“插入页眉页脚”“奇偶页不同”等排版需求
导出 PDF 时分页错位？问题大概率出在 transform 或 position: fixed
很多可视化编辑器为了拖拽、缩放、实时预览，会给编辑区域加 transform: scale(0.8) 或用 position: fixed 定位工具栏。这些样式会干扰 html2canvas 截图或 jsPDF 的页面尺寸计算，导致导出后每页内容被裁切或错行。
- 导出前临时移除所有
transform、filter、clip-path样式 - 确保分页容器宽度固定为
595px（A4 宽），高度为842px，且无 margin/padding 溢出 - 避免在分页容器内使用
position: fixed元素（如浮动按钮），它们在截图时可能消失或错位 - 测试时优先用 Chrome 打印预览（
Ctrl+P → Save as PDF）验证分页逻辑是否正确，再对接 JS 导出库
分页的核心从来不是“怎么切”，而是“谁来定义页边界”——编辑器里必须由 JS 显式维护页索引与 DOM 节点的映射关系，CSS 分页只是导出环节的辅助手段。一旦把分页逻辑混进样式层，后期调整页眉、页码、章节起始页时就很难收场。
