控制瀏覽器列印效果：移除頁首頁尾、CSS @media print 實戰技巧

IE 預設列印會包含頁首 (標題、網址) 與頁尾 (頁碼、日期)。雖可手動在「頁面設定」清除，但無法由網頁強制控制。現代解法是使用 **CSS @media print** 隱藏非列印區域、調整版面、強制分頁，配合列印專用樣式表實現所見即所得列印。

核心 CSS 技巧

<style media="print">
  /* 隱藏導覽列、側邊欄、按鈕等非列印元素 */
  .no-print { display: none !important; }

  /* 強制白底黑字，節省墨水 */
  body { background: white !important; color: black !important; }

  /* 避免表格/圖片跨頁斷裂 */
  table, img { page-break-inside: avoid; }

  /* 標題不單獨留在頁底 */
  h1, h2, h3 { page-break-after: avoid; }

  /* 強制分頁 */
  .page-break { page-break-before: always; }

  /* 列印專用字體大小 */
  @page { margin: 2cm; size: auto; }
</style>

HTML 結構配合

<div class="no-print"><button onclick="window.print()">列印</button></div>
<article>...列印內容...</article>

進階：ASP.NET 伺服器端輸出列印專用頁面

<asp:Content ID="PrintCss" ContentPlaceHolderID="Head" Runat="Server">
  <link rel="stylesheet" href="~/Css/print.css" media="print" />
</asp:Content>

瀏覽器支援現況

• Chrome/Edge/Firefox/Safari 完整支援 @media print、@page、page-break-*。
• IE 11 部分支援，建議加廠商前綴 -webkit-、-ms-。
• **無法以程式碼控制頁首/頁尾內容** (瀏覽器安全限制)，用戶需自行在列印對話框設定。

最佳實踐清單

1. 建立獨立 print.css，media="print" 只在列印時載入。
2. 使用語義化 HTML (<article>, <section>) 便於樣式控制。
3. 列印前預覽 (Ctrl+P) 驗證分頁、字體、隱藏元素。
4. 複雜報表考慮產生 PDF (iTextSharp, PdfSharp, DinkToPdf) 再列印，版面可控性最高。