列印

有時，您的網站或應用程式可能希望在列印內容時改善使用者體驗。有幾種可能的情況：

您希望調整佈局，以充分利用紙張的尺寸和形狀。
您希望使用不同的樣式來增強內容在紙張上的外觀。
您希望使用更高解析度的圖片以獲得更好的效果。
您希望調整列印的使用者體驗，例如在列印開始前呈現特殊格式的內容版本。

您可能還希望管理列印過程，但這些是一些最常見的情況。本文提供了幫助您的 Web 內容更好地列印的技巧和技術。

使用列印樣式表

將以下內容新增到您的 <head> 標籤中。

html

<link href="/path/to/print.css" media="print" rel="stylesheet" />

使用媒體查詢和 @page 控制列印內容

當您的網頁列印到紙張或 PDF 時，與在螢幕上顯示時相比，您可以使用 CSS @media 規則為您的網頁設定不同的樣式。print 媒體型別設定列印媒體的樣式；這些樣式將僅用於列印內容。

將其新增到樣式表的末尾。請注意，特異性和優先順序規則仍然適用。

css

@media print {
  /* All your print styles go here */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

您還可以使用 @page 規則來修改列印頁面的不同方面，包括頁面的尺寸、方向和邊距。@page 規則可用於針對列印輸出中的所有頁面或僅針對特定的頁面子集。

檢測列印請求

瀏覽器會發送 beforeprint 和 afterprint 事件，以確定何時可能發生了列印。您可以使用此功能調整列印過程中顯示的使用者介面（例如，在列印過程中顯示或隱藏使用者介面元素）。

示例

以下是一些常見示例。

完成時自動關閉視窗

以下示例將在使用者列印完內容後關閉視窗。

window.addEventListener("afterprint", () => self.close);

不開啟外部頁面即可列印

如果您想在不開啟外部頁面的情況下列印它，您可以使用一個隱藏的 <iframe>（參見：HTMLIFrameElement），在使用者列印其內容後自動將其移除。以下是一個可能的示例，它將列印一個名為 externalPage.html 的檔案：

HTML

html

<button id="print_external">Print external page!</button>

JavaScript

function setPrint() {
  const closePrint = () => {
    document.body.removeChild(this);
  };
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}

document.getElementById("print_external").addEventListener("click", () => {
  const hideFrame = document.createElement("iframe");
  hideFrame.onload = setPrint;
  hideFrame.style.display = "none"; // hide iframe
  hideFrame.src = "external-page.html";
  document.body.appendChild(hideFrame);
});

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者在 2025 年 7 月 14 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題