打印

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

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

您可能还有其他想要管理打印过程的情况，但这些是最常见的一些情况。本文提供了一些技巧和方法，可以帮助您的网络内容更好地打印。

使用打印样式表

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

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

使用媒体查询和 @page 控制打印内容

您可以使用 CSS @media At-规则为网页在纸上或作为 PDF 打印时设置不同的样式，以及在屏幕上显示时的样式。print 媒体类型 设置打印媒体的样式；这些样式仅用于打印内容。

将此添加到样式表的末尾。请注意，特异性 和优先级规则仍然适用

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

您还可以使用 @page At-规则修改打印页面的不同方面，包括页面的尺寸、方向和边距。@page At-规则可用于定位打印输出中的所有页面或仅定位特定页面子集

检测打印请求

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

示例

以下是一些常见示例。

完成后自动关闭窗口

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

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

打印外部页面而不打开它

如果您希望能够打印外部页面而不打开它，则可以使用隐藏的 <iframe>（请参阅：HTMLIFrameElement），在用户打印其内容后自动将其删除。以下是一个可能的示例，它将打印名为 externalPage.html 的文件

HTML

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

JavaScript

js
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);
});

另请参阅