使用 CSS 如何禁用浏览器打印页面 All In One
print.css 禁用
有时，你的网站或应用程序可能希望改善用户在打印内容时的体验。
有几种可能的情况：
- 你希望根据纸张的大小和形状
调整布局。 - 你希望使用不同的样式来
增强纸上内容的外观。 - 你希望使用更
高分辨率的图像以获得更好的效果。 - 你想调整打印的
用户体验，比如在打印开始前呈现一个特殊格式的内容版本。 - 你可能还希望管理打印过程的其他情况，但这些都是最常见的场景。
本文提供了帮助你更好地打印 web 内容的技巧和方法。
CSS media print
<link href="/path/to/print.css" media="print" rel="stylesheet" />
media query
@media print {
/* 你所有打印的样式都放在这里 */
#header,
#footer,
#nav {
display: none !important;
}
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_media_queries/Printing
JS 检测打印请求
浏览器发送 beforeprint 和 afterprint 事件，以确定打印何时发生。
你可以用它来调整打印过程中显示的用户界面（例如在打印过程中显示或隐藏用户界面元素）。
window.addEventListener("afterprint", () => self.close);
window.addEventListener("beforeprint", () => self.close);
beforeprint 和 afterprint 事件允许页面在打印开始之前更改其内容（例如，也许是移除 banner）然后在打印完成后还原这些更改。
一般来说，你应该更倾向于使用 @media print CSS at 规则，但在某些情况下可能有必要使用这些事件。
addEventListener("beforeprint", (event) => {});
onbeforeprint = (event) => {};
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeprint_event
addEventListener("afterprint", (event) => {});
onafterprint = (event) => {};
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/afterprint_event
iframe 隐藏/移除
如果你想在不打开弹窗的情况下打印外部页面，可以使用隐藏的 <iframe> 元素（参见：HTMLIFrameElement），在用户打印其内容后自动将其移除。
<button id="print_external">打印外部页面！</button>
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;
// 隐藏 iframe
hideFrame.style.display = "none";
hideFrame.src = "external-page.html";
document.body.appendChild(hideFrame);
});
demos
bug
- 直接打印
- 空白页面
