打印
有时,你的网站或应用程序可能希望改善用户在打印内容时的体验。有几种可能的情况:
- 你希望根据纸张的大小和形状调整布局。
- 你希望使用不同的样式来增强纸上内容的外观。
- 你希望使用更高分辨率的图像以获得更好的效果。
- 你想调整打印的用户体验,比如在打印开始前呈现一个特殊格式的内容版本。
你可能还希望管理打印过程的其他情况,但这些都是最常见的场景。本文提供了帮助你更好地打印 web 内容的技巧和方法。
使用打印样式表
将以下内容添加到你的 <head>
标签。
html
<link href="/path/to/print.css" media="print" rel="stylesheet" />
使用媒体查询和 @page 改善布局
检测打印请求
浏览器发送 beforeprint
和 afterprint
事件,以确定打印何时发生。你可以用它来调整打印过程中显示的用户界面(例如在打印过程中显示或隐藏用户界面元素)。
示例
以下是一些常见示例。
完成后自动关闭窗口
以下示例将在用户打印其内容后关闭窗口:
js
window.addEventListener("afterprint", () => self.close);
无需打开弹出窗口即可打印外部页面
如果你想在不打开弹窗的情况下打印外部页面,可以使用隐藏的 <iframe>
元素(参见:HTMLIFrameElement),在用户打印其内容后自动将其移除。下面是一个可能的示例,它将打印一个名为 externalPage.html
的文件:
HTML
html
<button id="print_external">打印外部页面!</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"; // 隐藏 iframe
hideFrame.src = "external-page.html";
document.body.appendChild(hideFrame);
});
参见
window.print
beforeprint
事件afterprint
事件- 媒体查询
@media
- CSS 分页媒体模块