列印頁面時怎樣自定義列印頁首頁尾或者去掉眉頁尾？

王铁柱6發表於2024-12-05

在前端開發中，控制列印時的頁首頁尾，或者完全移除它們，主要依賴於 CSS 的 @page 規則以及一些 JavaScript 的技巧。以下是一些方法：

1. 使用 CSS 的 @page 規則:

這是最常用的方法，可以讓你精細地控制頁首和頁尾的內容和樣式。

  • 移除頁首頁尾:
@page {
  margin: 0; /* 去除所有頁邊距，包括頁首頁尾的空間 */
  size: auto;  /* 根據內容自動調整頁面大小 */
}

@media print {
  header, footer { display: none !important; } /* 確保頁首頁尾元素被隱藏 */
  body { margin: 0 !important; } /* 去除 body 的頁邊距 */
}
  • 自定義頁首頁尾內容:
@page {
  @top-center {
    content: "This is the header"; /* 設定頁首內容 */
    font-size: 12pt;
  }
  @bottom-center {
    content: "Page " counter(page); /* 設定頁尾內容，包含頁碼 */
    font-size: 10pt;
  }
}

@page 規則中可以使用以下偽元素來定位頁首頁尾的不同區域：

  • @top-left
  • @top-center
  • @top-right
  • @bottom-left
  • @bottom-center
  • @bottom-right

還可以使用 counter(page) 來顯示頁碼，以及其他 CSS 屬性來設定樣式。

2. 使用 JavaScript 動態修改樣式:

如果需要更動態的控制，可以使用 JavaScript 在列印前修改樣式。

function printContent() {
  // 隱藏不需要列印的元素
  document.querySelectorAll('.no-print').forEach(element => {
    element.style.display = 'none';
  });

  // 新增或修改列印樣式
  const style = document.createElement('style');
  style.innerHTML = `
    @page {
      margin: 0;
    }
    body {
      margin: 0;
    }
  `;
  document.head.appendChild(style);

  // 執行列印
  window.print();

  // 列印完成後恢復原來的樣式 (可選)
  setTimeout(() => {
    document.head.removeChild(style);
    document.querySelectorAll('.no-print').forEach(element => {
      element.style.display = 'block';
    });
  }, 0);
}

// 在按鈕點選時觸發列印
document.getElementById('printButton').addEventListener('click', printContent);

3. 使用 window.print() 的一些技巧 (不太推薦):

  • 有些瀏覽器可能允許你透過傳遞一些引數給 window.print() 來控制頁首頁尾，但這並不是標準的做法，並且相容性很差，所以不推薦使用。

一些額外的建議:

  • 使用 @media print 可以定義專門用於列印的樣式，避免影響螢幕上的顯示效果。
  • 儘量使用 CSS 來控制樣式，避免過多的 JavaScript 操作，提高效能。
  • 測試不同瀏覽器和印表機的相容性，確保列印效果符合預期。
  • 對於複雜的列印需求，可以考慮使用專門的列印庫或服務。

透過結合以上方法，你可以靈活地控制列印頁面的頁首頁尾，實現自定義的列印效果。 記住根據你的具體需求選擇最合適的方法。

相關文章