一、問(wèn)題背景

瀏覽器原生打印的局限：

• 無(wú)法精確控制分頁(yè)位置
• 表格跨頁(yè)時(shí)表頭不重復(fù)
• 圖片可能被攔腰截?cái)?/li>
• Flex/Grid 布局內(nèi)容分頁(yè)異常
• 缺少統(tǒng)一的頁(yè)眉頁(yè)腳機(jī)制

要解決這些問(wèn)題，通常的思路是：在打印前，手動(dòng)把內(nèi)容切分成一頁(yè)一頁(yè)。

二、市面上的常見(jiàn)方案對(duì)比

三、整體處理流程

┌─────────────────┐
│  原始 DOM 元素   │
└────────┬────────┘
         │
         ▼
┌─────────────────┐   預(yù)處理：
│   預(yù)處理階段     │ → 克隆內(nèi)容、移除 no-print
└────────┬────────┘ → 內(nèi)聯(lián)樣式、打標(biāo)記
         │
         ▼
┌─────────────────┐   分頁(yè)（核心）：
│   分頁(yè)階段       │ → 遍歷節(jié)點(diǎn)、測(cè)量高度
└────────┬────────┘ → 判斷溢出、處理策略
         │        → 文本截?cái)?圖片縮放/移頁(yè)
         ▼
┌─────────────────┐   渲染：
│   渲染階段       │ → 組裝頁(yè)面、加頁(yè)眉頁(yè)腳
└────────┬────────┘ → 掛載到預(yù)覽容器
         │
         ▼
┌─────────────────┐
│  打印 / 預(yù)覽     │
└─────────────────┘

四、關(guān)鍵技術(shù)點(diǎn)

1. 測(cè)高容器

這是分頁(yè)系統(tǒng)的基礎(chǔ)設(shè)施。它需要滿(mǎn)足：

• 不可見(jiàn)（position: absolute; left: -9999px）
• 尺寸與打印頁(yè)面一致
• 樣式環(huán)境與最終渲染一致

// 偽代碼：創(chuàng)建測(cè)高容器
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
}

2. 節(jié)點(diǎn)類(lèi)型處理策略

不同類(lèi)型的節(jié)點(diǎn)需要不同的處理策略：

3. 文本截?cái)嗨惴?/h3>

文本截?cái)嗍亲顝?fù)雜的部分。基本思路：

1. 先判斷整段文本是否溢出
2. 如果溢出，用二分法尋找截?cái)帱c(diǎn)
3. 在詞/句子邊界處截?cái)?，避免半個(gè)字

// 偽代碼：文本截?cái)?
function splitTextNode(textNode, remainingHeight) {
  const text = textNode.textContent
  let left = 0
  let right = text.length
  
  // 二分查找最大可容納長(zhǎng)度
  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
    }
  }
  
  // 嘗試在標(biāo)點(diǎn)/空格處回退，獲得更自然的斷點(diǎn)
  const breakPoint = findNaturalBreak(text, left)
  
  return {
    part1: text.slice(0, breakPoint),
    part2: text.slice(breakPoint)
  }
}

4. 圖片縮放策略

圖片處理需要權(quán)衡：是犧牲一點(diǎn)清晰度塞進(jìn)當(dāng)前頁(yè)，還是留白移到下頁(yè)？

通常的策略：

• 計(jì)算當(dāng)前頁(yè)剩余空間比例
• 如果剩余空間超過(guò)閾值（如 40%），嘗試縮放
• 縮放后的寬度不能小于最小比例（如 30%）
• 否則移到下一頁(yè)

5. Hook 系統(tǒng)

實(shí)際項(xiàng)目中，用戶(hù)往往需要在分頁(yè)流程中插入自定義邏輯。一個(gè)設(shè)計(jì)良好的 Hook 系統(tǒng)能提供很大靈活性：

// 偽代碼：Hook 系統(tǒng)
const hooks = {
  onBeforeParse(content) { /* 修改原始 DOM */ },
  onAfterParse(content) { /* 調(diào)整預(yù)處理結(jié)果 */ },
  onFilter(node) { /* 返回 false 跳過(guò)節(jié)點(diǎn) */ },
  onBeforePageLayout(page, index) { /* 頁(yè)面創(chuàng)建后 */ },
  onAfterPageLayout(page, index) { /* 頁(yè)面填充后，可加水印 */ },
  onAfterChunked(pages) { /* 全部分頁(yè)完成 */ }
}

五、PrintomJs 方案介紹

PrintomJs 是基于上述思路實(shí)現(xiàn)的一個(gè)零依賴(lài)打印庫(kù)。

快速使用

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

const printer = new PrintomJs({
  element: '#content',
  paper: 'A4',
  margin: 15,
  header: { right: '機(jī)密文件' },
  footer: { center: '第 {current} / {total} 頁(yè)' }
})

await printer.exec()

主要特性

核心 API

// 創(chuàng)建實(shí)例
const printer = new PrintomJs(options)

// 預(yù)覽
await printer.preview('#container')

// 打印
await printer.exec()

// 更新內(nèi)容
document.getElementById('content').innerHTML = '新內(nèi)容'
await printer.update()

// 銷(xiāo)毀
printer.destroy()

六、總結(jié)

前端打印分頁(yè)的核心挑戰(zhàn)在于：

• 在不影響用戶(hù)頁(yè)面的情況下測(cè)量?jī)?nèi)容
• 處理不同類(lèi)型節(jié)點(diǎn)的溢出
• 在"完美"和"可用"之間找到平衡

需要根據(jù)具體場(chǎng)景選擇策略。但一個(gè)好的抽象（分階段處理 + Hook 系統(tǒng)）能讓解決方案更優(yōu)雅、可擴(kuò)展。

項(xiàng)目地址

GitHub: github.com/zhoumao1/Pr…

文檔: zhoumao1.github.io/PrintomJs/

到此這篇關(guān)于前端打印分頁(yè)技術(shù)探討與PrintomJs方案實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)前端打印分頁(yè)P(yáng)rintomJs內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論