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);
                });

除了“打印事件”事件永远不会触发之外，这种方法很有效。我希望在显示“打印预览”窗口时再触发一次，然后在单击“打印”按钮后再次触发。

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

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);
};

但是，我仍然认为这种方法非常复杂，而且对于企业应用来说还不够稳定。

<强>更新

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

从iFrame中检测打印事件

1 个答案: