Question

我使用以下代码打印了我的页面：

window.print();

下面的图片是Google Chrome浏览器中的打印预览。它有两个主要按钮：print和cancel。

enter image description here

我想知道用户是否点击了print或cancel按钮。我所做的是使用jquery：

打印预览的HTML代码：

<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>

Jquery代码：

 $('button > .cancel').click(function (e) {                
      alert('Cancel');
 });

 $('button > .print').click(function (e) {                
      alert('Print');
 });

我试过上面的代码没有运气。我错过了什么？

Answer 1

您无法直接从常规网页访问Chrome的内部窗口（本例中为打印对话框）。

    (function () {

        var beforePrint = function () {
            alert('Functionality to run before printing.');
        };

        var afterPrint = function () {
            alert('Functionality to run after printing');
        };

        if (window.matchMedia) {
            var mediaQueryList = window.matchMedia('print');

            mediaQueryList.addListener(function (mql) {
                //alert($(mediaQueryList).html());
                if (mql.matches) {
                    beforePrint();
                } else {
                    afterPrint();
                }
            });
        }

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;

    }());

或者，如果您想在打印预览打开时执行某些操作，可以尝试以下操作：

$(document).bind("keyup keydown", function (e) {
         if (e.ctrlKey && e.keyCode == 80) {
             setTimeout(function () { CallAfterWindowLoad();}, 5000);
             return true;
         }
     });

    function CallAfterWindowLoad()
    {
        alert("Open and call");
    }

参考： How to capture the click event on the default print menu called by Javascript window.print()

如果您提供这两个按钮点击事件的要求，我们可以为您提供替代解决方案。

Answer 2

这很容易实现：

force_encoding

完成打印作业或按下取消按钮后，您可以在标签内定义的myFunction（）将被触发。

Answer 3

据我所知，打印预览不是JS可以访问的任何document的一部分。这些可能会让您感兴趣：

Detecting browser print event

ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically

Answer 4

这应该可以解决问题。我使用了jQuery v2.2.0，它包含在html文件中。

$("#print").click(function() { // calls the id of the button that will print
    document.body.style.visibility = 'hidden'; //code for hiding the body
    document.getElementById('printthis').style.visibility = 'visible'; // div to be printed
    document.getElementById('printthis').style.position = 'absolute'; //some code/css for positioning. you can adjust this
    document.getElementById('printthis').style.top = '40px';
    document.getElementById('printthis').style.left = '0px';
    if (print()) { // shows print preview.

    } else { // else statement will check if cancel button is clicked.
        document.body.style.visibility = 'visible';
        document.getElementById('printthis').style.position = '';
        document.getElementById('printthis').style.top = '';
        document.getElementById('printthis').style.left = '';
        alert("Print Canceled");
    }
});

我想这也许可以用作在html中打印某些div的方法。只需隐藏body元素，只显示要使用某个定位css打印的div。希望它适用于你的。我已经尝试过了，我可以说它对我有用。

确定是否单击了Google Chrome打印预览中的打印/取消按钮

4 个答案: