使用 CSS 如何禁用浏览器打印页面 All In One

使用 CSS 如何禁用浏览器打印页面 All In One

print.css 禁用 PDF 导出网页

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

1. 你希望根据纸张的大小和形状调整布局。
2. 你希望使用不同的样式来增强纸上内容的外观。
3. 你希望使用更高分辨率的图像以获得更好的效果。
4. 你想调整打印的用户体验，比如在打印开始前呈现一个特殊格式的内容版本。
5. 你可能还希望管理打印过程的其他情况，但这些都是最常见的场景。
   本文提供了帮助你更好地打印 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

1. 直接打印

2. 空白页面

3. 原理分析:

添加了一个 div 透明遮罩层 💩

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

破解方案 ✅

1. 先选择文本，然后再打印

2. 手动删除遮罩层，，然后再打印

js ObserverMutation bug ⚠️

// ObserverMutation API

// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

refs

https://www.cnblogs.com/xgqfrms/p/15878284.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---