从 iFrame 检测打印事件

Question

我正在尝试构建一个打印解决方案，它使用 URL 以编程方式打印 PDF 文档并在打印后触发一个事件。

我正在使用下面的“matchMedia”事件侦听器来测试 Chrome (v54)。对于 IE 和 Firefox，我打算监听同一个 iframe contentWindow 对象的“onbeforeprint”和“onafterprint”。

这是我调用打印的方式。 dojo 函数只是一个 xhr 包装器。

                dojoRequest(url, {
                    handleAs: 'blob'
                }).then(function (blob) {
                    var src = URL.createObjectURL(blob);

                    printFrame = document.createElement('iframe');
                    printFrame.id = 'print-frame';
                    // printFrame.style.display = 'none';
                    printFrame.src = src;
                    document.body.appendChild(printFrame);

                    var mediaQueryList = printFrame.contentWindow.matchMedia('print');
                    mediaQueryList.addListener(function (mql) {
                        console.log('print event', mql);
                        debugger;
                    });

                    setTimeout(function () {
                        printFrame.contentWindow.print();
                    }, 0);
                });

这很好用，只是“打印事件”事件永远不会触发。我希望它在显示“打印预览”窗口时触发一次，并在单击“打印”按钮后再次触发。

我尝试针对主“窗口”对象注册相同的事件侦听器。它在手动启动打印（从“文件”菜单）时触发，但在使用上述方法以编程方式启动打印时不会触发。

Answer 1

要获取事件，您必须将代码封装在 iframe 的 onload 中，如下所示：

printFrame.onload = function () {
  var mediaQueryList = printFrame.contentWindow.matchMedia('print');
  mediaQueryList.addListener(function (mql) {
    console.log('print event', mql);
  });

  setTimeout(function () {
    printFrame.contentWindow.print();
  }, 0);
};

但是，我仍然认为这种方法确实很复杂，对于企业应用来说不够稳定。

更新：

显示它适用于 Chrome 54 的 Jsfiddle 链接：https://jsfiddle.net/anhhnt/nj851e52/