打印

有时，您的网站或应用程序可能希望在打印内容时改善用户体验。有几种可能的情况：

您希望调整布局，以充分利用纸张的尺寸和形状。
您希望使用不同的样式来增强内容在纸张上的外观。
您希望使用更高分辨率的图片以获得更好的效果。
您希望调整打印的用户体验，例如在打印开始前呈现特殊格式的内容版本。

您可能还希望管理打印过程，但这些是一些最常见的情况。本文提供了帮助您的 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 上查看此页面 • 报告此内容的问题