检测浏览器打印事件答案

【问题标题】：Detecting browser print event检测浏览器打印事件
【发布时间】：2010-11-17 01:37:29
【问题描述】：

是否可以检测用户何时从浏览器打印内容？

更复杂的是，如果我们在新窗口中向用户展示 PDF 文档，是否可以检测到该文档的打印（假设用户从浏览器窗口打印）？

我能找到的最接近的是我们是否实现了自定义打印功能（类似于this）并跟踪调用的时间

我主要对适用于 Internet Explorer（6 或更高版本）的解决方案感兴趣

【问题讨论】：

标签： pdf browser printing

【解决方案1】：

您现在可以使用以下技术在 IE 5+、Firefox 6+、Chrome 9+ 和 Safari 5+ 中检测打印请求：

(function() {
    var beforePrint = function() {
        console.log('Functionality to run before printing.');
    };
    var afterPrint = function() {
        console.log('Functionality to run after printing');
    };

    if (window.matchMedia) {
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function(mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;
}());

我会在http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/ 详细了解它的作用和用途。

【讨论】：

你太棒了。几天来，我一直在寻找onbeforeprint Chrome/Safari 支持。应该知道最好不要离开 SO 的温暖怀抱。
+1，很好，我打算很快抄袭这个答案。
这似乎不再适用于 Windows 上的 Chrome 38。 beforePrint 永远不会触发。 jsfiddle.net/o5oosa9o（右键单击结果 iframe 并选择“打印...”）
一旦打印预览完成渲染，afterPrint 现在就会在 Chrome 中触发
很抱歉碰到这个问题，但我是从我的问题 (stackoverflow.com/questions/28620711/…) 引到这里的，如果我想检测“打印”按钮的实际按下而不是用户的任何打印请求怎么办发行？

【解决方案2】：

对于 Internet Exploder，有事件 window.onbeforeprint 和 window.onafterprint，但它们不适用于任何其他浏览器，因此它们通常无用。

出于某种原因，它们的工作方式似乎完全相同，都是在打印窗口打开之前执行它们的事件处理程序。

但如果您仍然想要它，尽管有这些警告，这里有一个例子：

window.onbeforeprint = function() {
    alert("Printing shall commence!");
}

【讨论】：

不知道 Internet Exploder 是不是打字错误，但它很棒 kkkk
仅供参考developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

【解决方案3】：

如果仅用于跟踪目的，也许您可以将 CSS 打印媒体中的背景 url 设置为服务器页面（.aspx、.php 等），然后在服务器上执行某些操作？

This guy claims it works.

这不像 TJ 的解决方案那样通用，但当只需要跟踪时，它的错误可能更少（请参阅 TJ 的博客文章了解他发现的问题）。

【讨论】：

我认为我的方法存在一些问题，例如打印预览等，但对于不太重要的日志记录，它对我来说还可以。

【解决方案4】：

对于任何在 2020 年阅读本文的人。 addListener 函数大部分被弃用，取而代之的是 addEventListener，Safari 除外：

if (window.matchMedia) {
  const media = window.matchMedia("print");
  const myFunc = mediaQueryList => {
    if (mediaQueryList.matches) {
      doStuff();
    }
  };
  try {
    media.addEventListener("change", myFunc);
  } catch (error) {
    try {
    media.addListener(myFunc);
    } catch (error) {
      console.debug('Error', error)
    }
  }
}

参考：This other S.O question

【讨论】：