簡介這份 paged.js 教程資料包面向具備一定 JavaScript 基礎的前端開發(fā)者以及需要把 HTML 內容穩(wěn)定輸出為 PDF 的技術人員重點解決瀏覽器端分頁排版、打印樣式適配和文檔生成流程中的實際問題。教程圍繞 CSS Paged Media 展開涉及核心概念、安裝引入、基礎示例、頁面尺寸與邊距設置、復雜布局處理、PDF 輸出、框架集成及調試優(yōu)化等主題并關注分頁斷點、打印媒體查詢等細節(jié)適合作為理解分頁機制和定制打印樣式的參考也可為文檔導出工具選型做技術預研。壓縮包共 32401 個文件整體約 40.16MB包含大量 png 圖示、js 腳本、otf/eot/woff/ttf 字體資源以及 html、svg、txt、md、json 等配套文件可用于對照閱讀、查看示例結構和本地運行驗證。目錄組織清晰便于按主題檢索。已有 586 人學習可作為前端文檔導出、在線報告生成與 PDF 分頁排版的實用資料。1. 把 HTML 排成帶頁碼的書這份 Paged.js 教程卡在哪個位置手上有一批結構規(guī)整的 HTML 文檔要輸出成帶頁碼、頁眉、目錄、腳注的 PDF。第一反應通常是開 Word改版式改到懷疑人生或者上 LaTeX學習成本夠寫兩個項目。這份以 PDF 形式整理的 Paged.js 教程給的是中間路線用 CSS Paged Media 那套聲明式規(guī)則描述版面由一段 JavaScript 在瀏覽器里把長文檔真正切成一張張頁面盒再從瀏覽器打印成 PDF。它適合已經在用 Web 技術棧產出文檔、又不想把排版交給桌面軟件的人也適合想搞清楚“分頁到底發(fā)生在哪一層”的前端?？赐昴苣玫降淖钚￠]環(huán)是一頁 A4、頁碼正確、目錄頁碼能自動回填、導出不跑版。2. 分頁發(fā)生在哪一層Polisher、Chunker 與頁面盒的三角關系2.1 瀏覽器不實現(xiàn)的 CSS Paged Media被誰補上了瀏覽器對 CSS Paged Media 的支持少得可憐。page里的size和margin在打印時大致能生效但top-center、bottom-right這些 margin box以及counter(pages)、target-counter()、float: footnote主流瀏覽器基本一個都沒實現(xiàn)。Paged.js 是補這一層的庫它不是把頁面截圖而是真的操作 DOM把源內容按渲染高度切成若干.pagedjs_page每個頁面盒里再掛.pagedjs_sheet、內容區(qū).pagedjs_page_content、以及一圈 margin box 容器。內部有三個環(huán)節(jié)值得記住名字因為排錯時全靠它們定位。Polisher 負責處理樣式表把page規(guī)則抽出來轉成能作用在頁面盒上的 CSSChunker 負責切分它測量每個塊級元素的實際高度累加到超過版心高度就斷開生成 breakToken 繼續(xù)下一頁Previewer 串起整個流程并在不同階段拋出事件鉤子。樣式明明寫了卻沒生效先去 Polisher 處理后的 CSS 里找切頁位置莫名其妙去看 Chunker 量到的高度頁碼是空的那是 margin box 填充階段的事。三層分開看比在一堆.pagedjs_*類名里瞎猜快得多。這套做法有一個明確的天花板DOM 是真的被切開了。任何依賴“整體連續(xù)”的視覺效果在切口處都會斷比如帶圓角和陰影的卡片被劈成兩半、跨頁的豎線斷掉、box-shadow在下半頁被裁掉。這不是 bug是這套方案的物理邊界。接受不了就只能改寫內容結構把不可分割的東西包進break-inside: avoid的容器里。2.2 最小工程裝包、引 polyfill、寫出第一個 page先把依賴裝上。pagedjs這個包會帶出dist/paged.polyfill.js把它引到頁面里就會自動接管分頁不需要寫任何初始化代碼。# 只做本地排版驗證的話一個靜態(tài)服務就夠不用上構建工具 npm init -y npm install pagedjs npx serve .然后是頁面骨架。下面這份可以直接跑注意page的寫法和普通 CSS 是同一套語法只是規(guī)則名不同。!doctype html html langzh-CN head meta charsetutf-8 !-- polyfill 必須在樣式之前引它會在 DOM 就緒后接管分頁 -- script src./node_modules/pagedjs/dist/paged.polyfill.js/script style /* 紙張尺寸與版心印刷場景一律用 mm別用 px */ page { size: A4; margin: 22mm 18mm 20mm 18mm; /* 上 右 下 左 */ } /* 同一個 page 可以重復聲明規(guī)則會合并 */ page { bottom-center { content: counter(page) / counter(pages); font-size: 9pt; color: #666; } } body { font-family: Noto Serif CJK SC, Songti SC, serif; font-size: 11pt; line-height: 1.75; } h1 { font-size: 20pt; margin: 0 0 6mm; } p { margin: 0 0 3mm; text-align: justify; } /* 屏幕預覽時給頁面盒一點間隔方便肉眼確認切頁位置 寫進 media screen避免影響打印 */ media screen { body { background: #f2f2f2; margin: 0; } .pagedjs_page { margin: 12px auto; box-shadow: 0 1px 4px rgba(0,0,0,.18); } } /style /head body article h1 idcover模擬項目X 技術手冊/h1 p第一段正文。把要做成書的 HTML 直接放進來就行不需要額外的包裝層。/p p第二段正文。分頁由 polyfill 自動完成屏幕上會看到一張張獨立的紙。/p /article /body /html這里有幾個參數(shù)必須說清楚。size: A4決定頁面盒的寬高如果打印對話框里又選了別的紙型兩邊會打架導出必翻車所以后面接自動化時要用preferCSSPageSize把它固定住。margin是版心位置順序是上右下左頁眉頁腳就長在這塊留白里所以想要頁眉不擠正文靠的是調margin-top不是在正文里加 padding。counter(page)是當前頁碼counter(pages)是總頁數(shù)后者由 Paged.js 統(tǒng)計完所有頁面盒之后回填屏幕上第一眼看到的可能是空值等它排完就有了。提示page規(guī)則寫在任意style或外鏈 CSS 里都行但要保證它和正文樣式在同一份文檔里跨 iframe 引入的樣式表的page不一定被 Polisher 抓到。2.3 目錄頁碼回填target-counter 與 leader 的組合目錄頁碼是這類工具最容易讓人眼前一亮的功能寫法卻很簡單給目錄項一個指向目標的錨點然后用target-counter把目標所在頁碼取出來當偽元素內容。/* 目錄項不要下劃線右側自動補點線再跟頁碼 */ .toc a { text-decoration: none; color: inherit; } .toc a::after { /* leader() 生成填充點線target-counter 取目標元素所在頁碼 */ content: leader(.) target-counter(attr(href), page); font-variant-numeric: tabular-nums; /* 頁碼等寬右側才對齊 */ } /* 目錄單獨占頁別和正文擠在一起 */ .toc { break-after: page; }對應的 HTML 只需要保證href是同文檔錨點、目標元素有idnav classtoc ul lia href#ch1第 1 章 環(huán)境與依賴/a/li lia href#ch2第 2 章 版式參數(shù)/a/li /ul /nav article h1 idch1第 1 章 環(huán)境與依賴/h1 !-- ... -- h1 idch2第 2 章 版式參數(shù)/h1 !-- ... -- /article參數(shù)上要注意兩點。attr(href)拿到的是完整字符串含#target-counter內部會自己解析成元素引用所以href#ch1就夠了別寫成絕對 URL。如果你還想讓目錄里顯示標題文字而不是手寫把content換成target-text(attr(href))就能取到目標元素的文本代價是層級和樣式全靠::before/::after拼多級目錄反而更麻煩我一般還是手寫標題、只讓頁碼自動回填。target-counter取不到值的時候不會報錯只會靜默留空。第一次用很容易以為自己寫錯了選擇器其實是錨點沒對上。排查順序固定成三步href和id是否嚴格一致、目標元素是否在分頁流里被display: none藏掉的內容不算、::after是否被更高優(yōu)先級的選擇器覆蓋。3. 版式參數(shù)怎么設page 規(guī)則、命名頁面與頁眉頁腳3.1 page 里真正會影響成品的六個參數(shù)page能寫的東西不少但決定成品長相的就那么幾個。下面這張表是我反復改樣式之后沉淀下來的左邊是參數(shù)右邊是容易寫錯的地方。參數(shù)常用取值實際作用容易踩的地方sizeA4/210mm 297mm頁面盒寬高和打印對話框紙型不一致導出尺寸跑偏margin22mm 18mm 20mm 18mm版心位置順序上右下左想給頁眉留位置卻只加大上邊距忘了 margin box 就長在留白里margin boxtop-center等頁眉頁腳、頁碼落點用 padding 頂位置內容溢出被裁page自定義名字把元素綁到命名頁面以為會繼承到該元素后面所有頁break-*page/avoid/right斷頁與避斷兩側同時聲明憑空多出空白頁bleed/marks3mm出血與裁切線在瀏覽器打印鏈路里表現(xiàn)不完整真正印刷一般交給后端拼版關于bleed和裁切線說句實話走瀏覽器打印這條鏈路時出血很難做干凈因為打印對話框本身還會縮放。需要嚴格出血的項目通常的做法是先用 Paged.js 排出內容頁再交給專業(yè)的拼版工具加出血和爬升。這不是 Paged.js 的短板是瀏覽器打印模型的限制。3.2 命名頁面封面、正文、附錄各用一套版心一本書里不同部分的版式往往不同封面滿版不留白正文雙欄帶頁眉附錄單欄不要頁碼。做法是定義多個命名page再用元素上的page屬性去綁定。/* 封面零邊距滿版 */ page cover { margin: 0; bottom-center { content: none; } /* 封面不要頁碼 */ } /* 每章起始頁不顯示頁眉讓標題更醒目 */ page chapterStart { top-center { content: none; } } /* 附錄頁碼改羅馬數(shù)字 */ page appendix { bottom-center { content: counter(page, lower-roman); } } /* 綁定page 屬性寫在容器上 */ .cover { page: cover; break-after: page; } .chapter { page: chapterStart; break-before: page; } .appendix { page: appendix; break-before: right; }這里有個語義細節(jié)經常被誤解page屬性影響的是元素起始的那一頁。一個章節(jié)容器如果跨了 6 頁只有第一頁套用chapterStart后面 5 頁回落到默認page。很多人以為會一路繼承下去然后發(fā)現(xiàn)“第二章的頁眉怎么又冒出來了”其實行為一直是對的。要讓整章都不顯示頁眉得把頁眉的開關做到page級別而不是單頁級別或者接受“章首頁特殊、正文頁統(tǒng)一”這個更常見的排版慣例。break-before: right也值得單獨說。它要求新內容從右手頁開始如果當前正好停在右手頁就會插入一張空白頁。雙面印刷這是標準做法但在屏幕上翻 PDF 時看到空白頁別急著當 bug 修先確認是不是right在起作用。3.3 頁眉內容從哪來string-set 取文本running element 取整塊頁眉最常見需求是“顯示當前章節(jié)標題”。兩種實現(xiàn)路線差別不小。第一種用string-set它從元素里取文本存成一個命名字符串margin box 再用string()取出來。/* 把每個 h1 的文本存進 chaptertitle 這個字符串變量 */ h1 { string-set: chaptertitle content(text); } page { top-right { content: string(chaptertitle); font-size: 9pt; color: #555; } }第二種用 running element把一整塊 DOM 搬到頁眉里能帶 logo、能帶雙色文字。div classrunning-head 模擬項目X 技術手冊 span classver內部版/span /div.running-head { position: running(dochead); /* 從正文流里移除交給頁眉引用 */ } page { top-left { content: element(dochead); font-size: 9pt; } }怎么選頁眉只有一行純文字用string-set它有“當前頁對應的章節(jié)”這個語義跨頁時取哪一頁的值由第二個參數(shù)控制頁眉需要排版自由度圖標、分隔線、左右分區(qū)用 running element但它本質是把同一個 DOM 節(jié)點搬來搬去同一個 running element 被多處引用時行為會變得難以預測。string()的第二個參數(shù)CSS 規(guī)范里給了first、start、last幾種取法用來解決“標題落在上一頁底部、正文在下一頁頁眉該顯示誰”的問題。實際用的時候先在目標版本上把幾種取法都跑一遍看哪個符合你的排版習慣別默認它們全都實現(xiàn)得一樣。我吃過這個虧本地看著對換一個渲染環(huán)境頁眉就變成了上一章的標題最后靠start才穩(wěn)住。4. 長文檔的四件硬活目錄、腳注、交叉引用、斷頁控制4.1 多級目錄層級、點線與章節(jié)起始頁單級目錄用 2.3 的寫法就夠了真正做手冊時目錄一般有三級。層級不要靠縮進硬撐用類名控制樣式和結構分開。.toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin: 0 0 1.6mm; font-size: 10.5pt; } /* 三級縮進用 em 跟著字號走換字號不用改數(shù)值 */ .toc .lv2 { padding-left: 1.6em; font-size: 10pt; } .toc .lv3 { padding-left: 3.2em; font-size: 9.5pt; } /* 只有一級目錄加粗二級三級保持克制 */ .toc .lv1 { font-weight: 600; margin-top: 3mm; } /* 點線和頁碼對所有層級統(tǒng)一 */ .toc a::after { content: leader(.) target-counter(attr(href), page); }nav classtoc ul li classlv1a href#ch1第 1 章 環(huán)境與依賴/a/li li classlv2a href#sec111.1 依賴安裝/a/li li classlv2a href#sec121.2 目錄結構/a/li li classlv1a href#ch2第 2 章 版式參數(shù)/a/li /ul /navleader(.)的行為是把剩余空間用點填滿所以目錄項本身必須是塊級或 flex 撐滿寬度否則點線會擠在文字后面。如果發(fā)現(xiàn)點線長度忽長忽短八成是某個li被設成了inline-block。還有一個隱藏問題目錄本身頁數(shù)不定。三頁的目錄如果只留了一頁的位置后面會擠掉正文的第一頁頁碼全部錯位。給目錄容器加break-after: page是必須的同時目錄項不要用break-inside: avoid否則一頁放不下時會推走一大塊中間留白。4.2 腳注float: footnote 和 footnote 區(qū)域腳注是 Paged.js 相對亮眼的功能。寫法是把腳注內容直接放在正文引用處用float: footnote抽走。p 這段正文里有一個需要說明的點span classfn這里的數(shù)值來自模擬項目X 的內部測試記錄僅作示例。/span后面繼續(xù)。 /p/* 腳注本體從正文流里抽走落到本頁的腳注區(qū) */ .fn { float: footnote; font-size: 8.5pt; line-height: 1.5; } /* 正文里的上標編號 */ ::footnote-call { content: counter(footnote); vertical-align: super; font-size: 70%; line-height: 0; } /* 腳注區(qū)里的編號注意帶了點號 */ ::footnote-marker { content: counter(footnote) . ; } /* 腳注區(qū)與正文之間的分隔線寫在頁面級 */ page { footnote { border-top: 0.5pt solid #999; padding-top: 3mm; margin-top: 6mm; } }參數(shù)上有三點。counter(footnote)是 Paged.js 自己維護的不用手動編號但要注意它默認整篇連續(xù)編號想要每頁重編得在頁面上重置計數(shù)器這塊各版本行為不完全一致改之前先小樣本驗證。腳注內容必須寫在正文流的引用位置不要用 JS 事后插入因為切頁是在 DOM 就緒后立刻發(fā)生的后插入的節(jié)點趕不上這一輪布局。腳注區(qū)高度是參與版心計算的一條長腳注會擠掉正文行數(shù)所以腳注盡量控制在兩行以內超過就改成尾注。還有一個現(xiàn)實約束腳注擠不下時Paged.js 會把整段正文推到下一頁而不是把腳注截斷。這意味著一個段落如果特別長比如一整頁不分段腳注永遠找不到落點。正文塊保持正常分段這個問題基本不會出現(xiàn)。4.3 斷頁控制break-* 與 orphans/widows 的實際效果排版質量的差距八成在斷頁控制上。默認行為是“能塞就塞”標題孤零零留在頁底、段落最后一行單獨跑到下一頁都是常見畫面。/* 標題后面不許斷避免標題落在頁底 */ h1, h2, h3 { break-after: avoid; } /* 標題前面也不許斷避免標題跑到新頁第一行卻和上文割裂 */ h1, h2, h3 { break-before: avoid; } /* 段落至少留 3 行在頁底至少 3 行帶到下一頁 */ p { orphans: 3; widows: 3; } /* 圖表、代碼塊、引用塊整體不拆 */ figure, pre, blockquote, .callout { break-inside: avoid; } /* 表格允許跨頁但單行不許劈開表頭每頁重復 */ table { break-inside: auto; } tr { break-inside: avoid; } thead { display: table-header-group; } /* 章節(jié)從新頁開始附錄從右手頁開始 */ .chapter { break-before: page; } .appendix { break-before: right; }orphans和widows是最容易被忽略的兩個屬性因為它們在其他地方幾乎用不到。前者控制頁底最少留幾行后者控制頁頂最少帶幾行值一般設 2 到 3。設成 1 等于關掉保護設成 4 以上在中文字號下會導致大量半空頁得不償失。break-inside: avoid不能濫用。給一個 800px 高的卡片加這條它會整個被推到下一頁上一頁留下大片空白給嵌套容器同時加可能出現(xiàn)“誰都不讓誰”最終整塊溢出。經驗做法是只在高度可控的元素上加圖、代碼塊、提示框并且加之前先想清楚這塊東西如果真的有 1.5 頁高避斷反而是災難。5. 五個翻車現(xiàn)場空白頁、頁碼錯位、字體競態(tài)、表頭丟失、二次分頁5.1 章節(jié)之間憑空多出一張空白頁現(xiàn)象導出的 PDF 里某些章節(jié)之間夾著一張完全空白的頁屏幕上也能看到。原因基本是兩個。一是斷頁在兩側同時聲明上一章的容器寫了break-after: page下一章的容器又寫了break-before: page兩次強制斷頁疊加中間那張就是產物。二是元素高度剛好等于或略大于版心高度浮點誤差讓 Chunker 判定“放不下”于是推到下一頁而它本身幾乎沒有內容看起來就是空白。解決斷頁只在一側聲明統(tǒng)一寫在章節(jié)容器的break-before上把break-after全刪掉。定位時打開控制臺數(shù)一下document.querySelectorAll(.pagedjs_page).length跟預期頁數(shù)對不上再逐段二分注釋掉break-*規(guī)則通常十分鐘內能鎖定。我現(xiàn)在的習慣是所有斷頁規(guī)則集中寫在一個區(qū)塊里注釋標明“只允許單側聲明”就是被這個坑教育出來的。5.2 正文第一頁顯示成第 2 頁現(xiàn)象封面不顯示頁碼但正文第一頁的頁腳寫著“2 / 48”全篇頁碼整體偏移一位。原因封面也在分頁流里占用了counter(page) 1。你只是把封面的頁碼隱藏了content: none計數(shù)器并沒有歸零。解決兩個方向。CSS 方向是在正文起始元素上加counter-reset: page 1讓計數(shù)器從這里重算但這是 Paged.js 的擴展行為不是所有環(huán)境都穩(wěn)上生產前必須實測。工程方向更保險封面單獨渲染一次正文單獨渲染一次最后在 PDF 層合并頁碼天然從 1 開始。項目里做正式交付物時我傾向后者雖然多一步但不用賭渲染器的實現(xiàn)細節(jié)。順帶一提前言用羅馬數(shù)字、正文用阿拉伯數(shù)字這種需求做法是把前言和正文拆成兩個命名頁面各自counter(page, lower-roman)和counter(page)再把counter-reset放在兩段的交界處。復雜歸復雜但這是唯一能同時滿足兩種編號體系的路子。5.3 字體和圖片沒加載完就開始切頁現(xiàn)象導出的 PDF 和屏幕上看到的完全是兩份東西行高變了、每行字數(shù)變了、末尾多出好幾頁或者圖片位置全錯后面內容整體上移。原因Paged.js 在 DOM 就緒后立刻開始切頁此時 Web 字體還在下載瀏覽器先用 fallback 字體渲染Chunker 量到的高度是錯的。字體替換完成之后每行能塞的字數(shù)變化整篇需要重排但分頁已經結束。圖片同理沒寫死尺寸的img初始高度接近 0加載完撐開后面的分頁全廢。解決給所有圖片寫死width/height或aspect-ratio讓它在加載前就占好位置把分頁推遲到字體和圖片都就緒之后具體做法在 6.1 給代碼。字體這塊還有一個隱性成本中文字體動輒幾 MB用font-display: swap會讓首屏更快但排版更不穩(wěn)做 PDF 輸出時反而應該用font-display: block寧可等一會兒也別讓它換字。5.4 長表格翻頁后表頭不見了現(xiàn)象跨頁的表格第二頁開始只有數(shù)據(jù)行讀者對不上哪列是什么。原因thead沒有聲明為table-header-group。默認的table-header-group是瀏覽器給的但在分頁場景下需要顯式寫出來讓切頁邏輯知道“這一段每頁都要重復”。另一種情況是表格上加了break-inside: avoid整塊被推到下一頁雖然表頭在但上一頁留下半頁空白視覺上更難看。解決thead { display: table-header-group; }tr { break-inside: avoid; }保證單行不被劈開把表格上的break-inside: avoid去掉。如果表格有tfoot做合計行同樣處理。另外表格列寬盡量用table-layout: fixed加百分比自動列寬在跨頁時可能因為內容分布變化而重算導致前后兩頁列寬不一致。5.5 打印預覽比屏幕多出幾頁現(xiàn)象屏幕上數(shù)出來 40 頁CtrlP 預覽變成 43 頁或者每頁底部內容被裁掉一截。原因二次分頁。Paged.js 已經把內容切成了固定高度的頁面盒瀏覽器打印時又按自己的page規(guī)則分了一次兩套規(guī)則打架。另一種是page.pdf()里還帶著 margin和 CSS 里的margin疊加版心被壓小。解決打印媒介下把page的margin歸零因為版心邊距已經由頁面盒自己承擔了headless 打印時用preferCSSPageSize: true讓渲染器服從 CSS 里的size同時把margin全部設成 0printBackground: true一定要開否則頁眉線、底紋、邊框全部消失看起來像樣式丟了。注意不要用瀏覽器的“另存為 PDF”做最終交付它受用戶本機紙型、縮放比例、頁眉頁腳開關影響同一份文件在不同機器上能出不同結果。要么走 headless要么在頁面里顯式提示用戶把頁邊距選“無”、縮放選“默認”。6. 接進自動化等對完成信號再做版式回歸6.1 headless 打印auto:false 加一個顯式完成標記自動分頁最大的問題是“什么時候算排完了”沒有標準答案。穩(wěn)妥做法是關掉自動執(zhí)行手動觸發(fā)并在after回調里打一個標記外部等這個標記。// print.js —— 用 Playwright 驅動已經接好 Paged.js 的頁面 const { chromium } require(playwright); (async () { const browser await chromium.launch(); const page await browser.newPage(); // 關鍵關掉 auto改成手動觸發(fā)否則拿不到排完這個時刻 await page.addInitScript(() { window.PagedConfig { auto: false, after: (flow) { window.__pagedReady true; window.__pagedTotal flow.total; // 總頁數(shù)后面做回歸斷言用 }, }; }); await page.goto(http://localhost:8080/manual.html, { waitUntil: load }); // 字體是異步的等它落地再切頁否則行高全錯 await page.evaluate(async () { await document.fonts.ready; await window.PagedPolyfill.preview(); }); await page.waitForFunction(() window.__pagedReady true, { timeout: 60000 }); await page.pdf({ path: out.pdf, preferCSSPageSize: true, // 服從 CSS 的 page size別讓渲染器再猜 printBackground: true, // 頁眉線、底紋、邊框全靠它 margin: { top: 0, right: 0, bottom: 0, left: 0 }, // 版心邊距已在 CSS 里別疊加 }); await browser.close(); })();document.fonts.ready是這一段的重點它返回一個 Promise字體全部就緒才 resolve。waitForFunction的超時要給足中文長文檔加上幾 MB 字體一分鐘并不夸張。flow.total來自after回調是 Paged.js 統(tǒng)計出的總頁數(shù)比自己去數(shù) DOM 節(jié)點可靠。6.2 把頁數(shù)和關鍵頁文本變成斷言版式回歸不需要圖像比對太脆。頁數(shù)加關鍵頁文本這兩條斷言能擋住 90% 的樣式事故。// 改完樣式跑一遍頁數(shù)或關鍵頁內容變了就先看 diff const total await page.evaluate(() window.__pagedTotal); const page5 await page.evaluate(() document.querySelectorAll(.pagedjs_page)[4].innerText.slice(0, 40) ); if (total ! 42) { throw new Error(頁數(shù)從 42 變成 ${total}先查字體加載和 break 規(guī)則); } if (!page5.includes(第 3 章)) { throw new Error(第 5 頁內容異常${page5}); }頁數(shù)變了不一定是壞事但一定意味著有東西動了可能是字體換了、可能是斷頁規(guī)則改了、也可能是某個圖片沒加載出來。把它當紅燈逼自己每次改完樣式都跑一遍比事后發(fā)現(xiàn)交付物錯版強太多。我現(xiàn)在的固定動作是改完任何一條page或break-*規(guī)則先跑 6.1 的腳本出一份 PDF肉眼掃一遍頁眉頁腳再跑 6.2 的斷言兩條都過才算完。這套流程是從一次交付前夜發(fā)現(xiàn)全篇頁碼偏移一位開始養(yǎng)成的那次通宵重排的教訓太貴。那份 PDF 教程我一般不開著通讀當成屬性索引放在手邊遇到string()的取值或者footnote的寫法再翻效率比從頭看高得多。希望幫到你。本文還有配套的精品資源點擊獲取