正在检测用户是否按下了以编程方式调用的打印对话框上的&print&quot；-前端问题

Detecting if the user pressed quot;Printquot; on the print dialog that was called programatically(正在检测用户是否按下了以编程方式调用的打印对话框上的printquot；)

本文介绍了正在检测用户是否按下了以编程方式调用的打印对话框上的&print&quot；的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建一个Web应用程序，用户可以在其中打印面板及其内容。我找到一个代码as seen here，并将其调整为：

Ext.define('My_app_name.override.form.Panel', {
    override: 'Ext.form.Panel', 

    print: function(pnl) {

        if (!pnl) {
            pnl = this;
        }

        // instantiate hidden iframe

        var iFrameId = "printerFrame";
        var printFrame = Ext.get(iFrameId);

        if (printFrame === null) {
            printFrame = Ext.getBody().appendChild({
                id: iFrameId,
                tag: 'iframe',
                cls: 'x-hidden',
                style: {
                    display: "none"
                }
            });
        }

        var cw = printFrame.dom.contentWindow;
        var stylesheets = "";
        var markup;
        // instantiate application stylesheets in the hidden iframe

        var printTask = new Ext.util.DelayedTask(function(){
            // print the iframe
            cw.print();

            // destroy the iframe
            Ext.fly(iFrameId).destroy();

        });

        var strTask = new Ext.util.DelayedTask(function(){
            var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);


            // output to the iframe
            cw.document.open();
            cw.document.write(str);
            cw.document.close();

            // remove style attrib that has hardcoded height property
            //             cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
            printTask.delay(500);

        });

        var markUpTask = new Ext.util.DelayedTask(function(){
            // get the contents of the panel and remove hardcoded overflow properties
            markup = pnl.getEl().dom.innerHTML;
            while (markup.indexOf('overflow: auto;') >= 0) {
                markup = markup.replace('overflow: auto;', '');
            }
            while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
                markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
            }

            strTask.delay(500);
        });


        var styleSheetConcatTask = new Ext.util.DelayedTask(function(){

            // various style overrides
            stylesheets += ''.concat(
                "<style>", 
                ".x-panel-body {overflow: visible !important;}",
                // experimental - page break after embedded panels
                // .x-panel {page-break-after: always; margin-top: 10px}",
                "</style>"
            );

            markUpTask.delay(500);
        });


        var styleSheetCreateTask = new Ext.util.DelayedTask(function(){


            for (var i = 0; i < document.styleSheets.length; i++) {
                stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
            }
            styleSheetConcatTask.delay(500);
        });

        styleSheetCreateTask.delay(500);
    }
});

我设置延迟是为了让函数在打印网格和照片时更加一致，因为从样式组合&q；需要时间。

在函数"；汇编要打印的数据后，它调用浏览器的本机打印方法。我现在的问题是，我不知道用户是否在其Web浏览器的打印对话框中按了&Quot；Print"；或&Quot；Cancel&Quot；。

是否有办法为此覆盖函数创建回调，以便我可以知道用户是否确实完成了打印或取消了打印作业？

更新

我检查了下面which led me to this pageMindparses注释中的链接。我尝试通过执行以下操作来实现代码：

var beforePrint = function() {
    console.log('before print');
    form.print();
};
var afterPrint = function() {
    console.log('after print');
};

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

其中form是我的表单，print是上面的打印覆盖功能。

所有这些代码都在一个按钮侦听器中。

但是，这个解决方案的问题是，它似乎只有在用户按Ctrl/Command+P时才能工作。如果打印对话框像上面的覆盖函数中那样以编程方式调用，它就不能工作。我关注的第二个问题是，该函数在用户发出Ctrl/Command+P命令时触发。我想知道的是用户真正单击对话框中的"打印"命令的时间，而不是"打印"对话框出现的时间。

正在检测用户是否按下了以编程方式调用的打印对话框上的&print&quot；

问题描述

更新

推荐答案

基础教程推荐