HTML打印時正文被截斷：從打印預覽檢查滾動容器與分頁

開始前先確認

核心結論： 出現這種截斷現象，應先排查佈局約束，不能僅憑截斷判斷源內容已經丟失，而是屏幕端爲了交互設計的“固定高度”與“滾動溢出（overflow: hidden / auto / scroll）”容器在打印環境下未能解除限制。固定高度和溢出規則可能使滾動區域不能按預期展開，從而把超出容器可視範圍的正文直接裁切。解決的關鍵是在瀏覽器開發者工具中模擬打印樣式，將限制高度的容器重置爲自然延展，並配合分頁規則完成檢查。

一、內容爲何被截斷：滾動容器與分頁機制

屏幕顯示與紙張打印屬於兩種完全不同的渲染媒介。瞭解兩者在佈局機制上的差異，有助於快速定位截斷根源：

1. 屏幕媒介與滾動機制： 屏幕網頁通常採用連續視口，開發者常給 html、body 或主要包裹層（如 .main-container、.content）設置 height: 100%、max-height: 100vh 以及 overflow: auto。內容一旦超出，屏幕會出現內部滾動條供用戶滾動閱讀。
2. 打印媒介與內容碎片化（Fragmentation）： 根據 MDN 打印媒體指南 的說明，打印媒體主要面向靜態輸出，必須通過打印預覽校驗實際佈局。而在紙張打印與導出 PDF 時，連續流必須被切分爲獨立的物理頁面，這一過程在 CSS 規範中稱爲分頁媒體（Paged Media）。
3. 截斷產生的物理衝突： 根據 MDN 分頁媒體指南 的解釋，分頁媒體規則專門控制頁面區域與內容斷頁拆分，但各瀏覽器引擎的具體支持情況存在差異。當帶有固定高度限制與 overflow: hidden 或 overflow: scroll 的容器進入打印引擎時，可能限制可打印區域，結果依佈局和瀏覽器而異。在社區開發討論中，關於打印樣式只打印一頁並切斷剩餘文本的討論中有容器溢出限制的個案，不能據此推斷所有截斷原因。

二、從打印預覽定位截斷：四步排查流程

在調整任何樣式之前，應先通過瀏覽器的內置調試工具還原打印環境，避免盲目猜測。

步驟 1：打開瀏覽器打印預覽

使用快捷鍵 Ctrl + P（macOS 爲 Cmd + P）調出打印窗口。粗略瀏覽總頁數與內容完整度：

• 若屏幕上有上萬字內容，但打印預覽僅顯示 1 頁或 2 頁且末尾截斷，可先檢查外層容器，也要排查打印範圍、內容是否已加載等因素。
• 若截斷髮生在特定段落、表格或多行代碼塊內部，則可能是局部的組件級容器設置了限制。

步驟 2：在開發者工具中啓用打印媒體模擬

不需要每次都反覆按 Ctrl + P。按 F12 打開瀏覽器開發者工具（以 Chrome / Edge 爲例）：

1. 按 Ctrl + Shift + P 喚出命令菜單，輸入並選擇 Show Rendering（顯示渲染）。
2. 在底部的渲染面板中找到 Emulate CSS media type（模擬 CSS 媒體類型），將其從“無模擬”切換爲 print。
3. 此時網頁視圖會直接切換到打印樣式渲染狀態，便於實時檢查 DOM 結構和生效樣式。

步驟 3：逐層排查父級容器的 height 與 overflow

在 Elements（元素）面板中，從 <html> 和 <body> 開始，自頂向下檢查正文外層的所有包裝標籤：

• 檢查 Computed（計算樣式）面板中的 height、max-height 和 overflow 屬性。
• 觀察是否存在 height: 100%、height: 100vh、overflow: hidden 或 overflow-y: auto。
• 在樣式面板中臨時取消勾選這些規則，觀察頁面正文是否立即沿垂直方向自然展開。

步驟 4：檢查特定容器的分頁規則

除了高度與滾動限制，還要注意父元素是否設置了不當的分頁避免規則（如 break-inside: avoid 或 page-break-inside: avoid）。如果一個過長的區塊被強制禁止在內部斷頁，且其高度超過單張紙張可用高度，某些瀏覽器打印引擎也會直接將其溢出部分切掉。

三、常見排查與樣式修正對照表

在排查過程中，建議重點對首頁、中段頁、末頁以及特殊排版元素進行逐項覈對：

四、假設案例：項目週報導出截斷的修復演練

爲幫助理解上述診斷流程，我們通過一個假設場景說明從發現問題到臨時修復的完整過程（此案例爲說明排版機制的虛構示例）：

場景背景

某團隊需要將內部 Web 系統的項目週報直接另存爲 PDF 交付給客戶。該週報包含約 3500 字的正文、兩個進度統計表以及若干關鍵日誌。在屏幕端查看時，右側有清晰的滾動條，所有文字與表格均可完整閱讀。但在打印預覽中，生成的 PDF 只有 1 頁，正文進行到第 3 個段落時便在紙張底部被整齊切斷。

排查過程

1. 在開發者工具中模擬 print 媒體，發現頁面的總高度並未隨文字延伸。
2. 逐層檢查 DOM 樹，發現最外層存在一個結構：

html <div id="root"> <div class="report-app"> <main class="scroll-content">...</main> </div> </div>

1. 查看 .report-app 和 .scroll-content 的計算樣式：

css .report-app { height: 100vh; overflow: hidden; } .scroll-content { height: 100%; overflow-y: scroll; } 此處爲典型的單屏沉浸式佈局，在屏幕上依靠 .scroll-content 的局部滾動條瀏覽，但打印引擎無法“滾動”，只輸出了當前可視窗口的一頁。

針對性調整思路

在專供打印的樣式表或 @media print 媒體查詢中，將固定高度與滾動溢出全部還原爲自動延展：

@media print {
  /* 解除根节点与视口容器的高度绑定 */
  html, body, #root, .report-app {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* 允许正文容器根据内容完整延展并自然断页 */
  .scroll-content {
    height: auto !important;
    overflow: visible !important;
    position: static !important;
  }
}

應用該樣式後再打開打印預覽，假設預覽恢復多頁後，仍須覈對首、中、末頁，不能僅用頁數證明內容完整。

五、排查誤區與侷限性說明

在處理 HTML 打印截斷問題時，需要理清技術邊界，避免常見誤區：

1. 不要直接修改全局生產樣式： 很多固定高度和 overflow: auto 是屏幕端交互（如固定導航欄、側邊欄獨立滾動）所必需的。所有重置規則必須嚴格限定在 @media print 作用域內，切勿因修復打印而破壞屏幕端的正常交互體驗。
2. CSS 打印規則並非萬能： 紙張排版受到打印機硬件邊距、操作系統打印驅動、瀏覽器內核（Blink / WebKit / Gecko）等多重因素影響。簡單的 overflow: visible; height: auto; 可以用來測試是否由容器約束引起，但無法保證在所有極端複雜的絕對定位或多層嵌套佈局下都達到完美效果。
3. 交付物關聯要素的綜合檢查： 當正文由 Markdown 轉換而來或作爲文件清單的一部分進行交付時，排版完整性僅是覈對的一環。例如，文檔內若存在跨文件跳轉或圖片引用，還應結合 Markdown相對鏈接檢查 確認內嵌鏈接的有效性；若文檔中附帶多規格圖片或高分辨率圖表，應配合 圖片交付版本覈對 確認輸出圖形是否變形或被強制縮放。
4. 實際輸出爲準： 編輯器預覽不能證明打印件完整，需打開導出的 PDF 或逐頁覈對紙張。

六、下一步行動與交付覈對

爲了確保最終交付給客戶或存檔的 PDF / 打印件真實無誤，建議在完成樣式調整後採取以下交付流程：

1. 保留原稿備份： 在進行任何 HTML 源碼編輯或樣式微調前，務必保留一份未改動的原始文件，防止排版調試破壞原始數據。
2. 通讀多處關鍵節點： 重新生成打印預覽後，不要只看第 1 頁。務必重點檢查首屏標題、正文跨頁處、表格跨頁表頭、以及最後一頁的附錄與署名是否全部留存。
3. 按基礎教程完成核驗： 保留原稿，再按相關基礎教程完成核對，確認文本、表格與引用的完整性後再行定稿交付。