前端打印分页技术探讨与PrintomJs方案实现代码

┌─────────────────┐
│  原始 DOM 元素   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐   预处理：
│   预处理阶段     │ → 克隆内容、移除 no-print
└────────┬────────┘ → 内联样式、打标记
         │
         ▼
┌─────────────────┐   分页（核心）：
│   分页阶段       │ → 遍历节点、测量高度
└────────┬────────┘ → 判断溢出、处理策略
         │        → 文本截断/图片缩放/移页
         ▼
┌─────────────────┐   渲染：
│   渲染阶段       │ → 组装页面、加页眉页脚
└────────┬────────┘ → 挂载到预览容器
         │
         ▼
┌─────────────────┐
│  打印 / 预览     │
└─────────────────┘

// 伪代码：创建测高容器
function createProbeContainer(pageConfig) {
  const container = document.createElement('div')
  container.style.cssText = `
    position: absolute;
    left: -9999px;
    top: 0;
    width: ${pageConfig.pageWidth}px;
    visibility: hidden;
  `
  document.body.appendChild(container)
  return container
}

// 伪代码：文本截断
function splitTextNode(textNode, remainingHeight) {
  const text = textNode.textContent
  let left = 0
  let right = text.length
  
  // 二分查找最大可容纳长度
  while (left < right) {
    const mid = Math.floor((left + right + 1) / 2)
    const part = text.slice(0, mid)
    const height = measureText(part)
    
    if (height <= remainingHeight) {
      left = mid
    } else {
      right = mid - 1
    }
  }
  
  // 尝试在标点/空格处回退，获得更自然的断点
  const breakPoint = findNaturalBreak(text, left)
  
  return {
    part1: text.slice(0, breakPoint),
    part2: text.slice(breakPoint)
  }
}

// 伪代码：Hook 系统
const hooks = {
  onBeforeParse(content) { /* 修改原始 DOM */ },
  onAfterParse(content) { /* 调整预处理结果 */ },
  onFilter(node) { /* 返回 false 跳过节点 */ },
  onBeforePageLayout(page, index) { /* 页面创建后 */ },
  onAfterPageLayout(page, index) { /* 页面填充后，可加水印 */ },
  onAfterChunked(pages) { /* 全部分页完成 */ }
}

import PrintomJs from 'printom-js'
import 'printom-js/print.css'

const printer = new PrintomJs({
  element: '#content',
  paper: 'A4',
  margin: 15,
  header: { right: '机密文件' },
  footer: { center: '第 {current} / {total} 页' }
})

await printer.exec()

// 创建实例
const printer = new PrintomJs(options)

// 预览
await printer.preview('#container')

// 打印
await printer.exec()

// 更新内容
document.getElementById('content').innerHTML = '新内容'
await printer.update()

// 销毁
printer.destroy()