跳转至

打印样式

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

  • 你希望根据纸张的大小和形状调整布局。
  • 您希望使用不同的样式来增强纸上内容的外观。
  • 您希望使用更高分辨率的图像以获得更好的效果。
  • 您想调整打印的用户体验，比如在打印开始之前提供一个特殊格式的内容版本。

您可能还希望管理打印过程的其他情况，但这些是最常见的场景。本文提供了一些提示和技术帮助您更好地打印网页内容。

使用打印样式表

将以下内容添加到您的<head>标签。

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

使用媒体查询和@page改善布局

你可以在规则中使用CSS@media为网页设置打印在纸上和在屏幕上显示时的不同外观。print选项可以设置打印内容时使用的样式。

将其添加到您的样式表中。请注意，特殊性和优先级规则仍然适用：

@media print {
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

您还可以使用@pageat规则打印页面的外观，包括页面的尺寸、方向和边距。at@page规则可用于定位打印输出中的所有页面或页面的特定子集。

检测打印请求

浏览器发送beforeprint和afterprint事件内容确定打印何时发生。您可以用它来调整打印过程中显示的用户界面（例如在打印过程中显示或隐藏用户界面元素）。

效果

以下是一些常见的示例。

完成后自动关闭窗口

以下示例将在用户打印其内容后关闭窗口：

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

展开打开弹出窗口即可打印外部页面

如果你想在不打开弹窗的情况下打印外部页面，可以使用隐藏的<iframe>元素（请参阅：HTMLIFrameElement），在用户下面打印其内容后自动将其删除。是一个可能的示例，将会打印一个名为externalPage.html的文件：

超文本标记语言

<button id="print_external">打印外部页面！</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"; 
  hideFrame.src = "external-page.html";
  document.body.appendChild(hideFrame);
});