Question

在我的应用程序中，我尝试打印出用户的凭证页面，我用过：

  var htm ="<div>Voucher Details</div>";
  $('#divprint').html(htm);
  window.setTimeout('window.print()',2000);

'divprint'是我页面中的div，用于存储有关优惠券的信息。

它有效，弹出打印页面。但是我希望一旦用户进一步推进应用程序点击“print”或“close”弹出窗口。

例如，我想在弹出窗口关闭后将用户重定向到另一个页面：

window.application.directtoantherpage();//a function which direct user to other page

如何确定弹出打印窗口已关闭或打印完成？

Answer 1

在FireFox和Internet Explorer中，您可以收听后期打印事件。

https://developer.mozilla.org/en-US/docs/Web/API/window.onafterprint

window.onafterprint = function(){
   console.log("Printing completed...");
}

可以使用window.matchMedia在其他浏览器中获得此功能。

(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/

Answer 2

关于chrome（V.35.0.1916.153 m）试试这个：

function loadPrint() {
    window.print();
    setTimeout(function () { window.close(); }, 100);
}

非常适合我。用户完成打印对话框后，它将关闭窗口。

Answer 3

兼容chrome，firefox，opera，Internet Explorer
注意：需要jQuery。

<script>

    window.onafterprint = function(e){
        $(window).off('mousemove', window.onafterprint);
        console.log('Print Dialog Closed..');
    };

    window.print();

    setTimeout(function(){
        $(window).on('mousemove', window.onafterprint);
    }, 1);

</script>

Answer 4

只需将window.print（）放入另一个函数

即可检测到它何时完成

//function to call if you want to print
var onPrintFinished=function(printed){console.log("do something...");}

//print command
onPrintFinished(window.print());

在Firefox，Google Chrome，IE

中测试

Answer 5

见https://stackoverflow.com/a/15662720/687315。作为一种解决方法，您可以在窗口（Firefox和IE）上侦听afterPrint事件并在{之后监听文档上的鼠标移动（表示用户已关闭打印对话框并返回到页面） {1}} API表示媒体不再匹配“打印”（Firefox和Chrome）。

请记住，用户可能已经或可能没有实际打印过该文档。此外，如果您在Chrome中过于频繁地致电window.mediaMatch，则可能甚至没有提示用户进行打印。

Answer 6

window.print在chrome上同步运行..在你的控制台中试试

window.print();
console.log("printed");

＆＃34;印刷＆＃34;除非用户关闭（取消/保存/打印）打印对话框，否则不会显示。

Here is a more detailed explanation about this issue.

我不确定IE或Firefox会在以后检查和更新

Answer 7

使用w = window.open（url，'_ blank'）在新窗口中打印并尝试w.focus（）; w.close（）;并检测页面何时关闭。适用于所有浏览器。

w = window.open(url, '_blank');
w.onunload = function(){
 console.log('closed!');
}
w.focus();
w.print();
w.close();

完成打印后窗口关闭。

Answer 8

这实际上对我有用铬。我很惊讶。

array(
    ...
    'user_address' => '26 Aorile Costo',
    ...
)

Print是我编写的一个函数，它调用window.print（）;如果禁用Print（）;

，它也可用作纯阻止程序

如user3017502所述

window.print（）将暂停，以便您可以像这样添加onPrintFinish或onPrintBegin

jQuery(document).bind("keyup keydown", function(e){
    if(e.ctrlKey && e.keyCode == 80){
         Print(); e.preventDefault();
    }
});

Answer 9

测试过IE，FF，Chrome并且可以正常使用。

object

Answer 10

鉴于您希望等待打印对话框消失，我会在窗口上使用焦点绑定。

print();

var handler = function(){
    //unbind task();
    $(window).unbind("focus",handler);
}

$(window).bind("focus",handler);

通过在处理函数中放入unbind，我们可以防止焦点事件与窗口保持联系。

Answer 11

它与$（window）.focus（）对我有用。

var w;
var src = 'http://pagetoprint';
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
    w = $('<iframe></iframe>');
    w.attr('src', src);
    w.css('display', 'none');
    $('body').append(w);
    w.load(function() {
        w[0].focus();
        w[0].contentWindow.print();
    });
    $(window).focus(function() {
        console.log('After print');
    });
}
else {
    w = window.open(src);
    $(w).unload(function() {
        console.log('After print');
    });
}

Answer 12

在Chrome 41.0上..我必须把这个

我在加载页面上自动打印：

<body style="background-color:white;" onload="print_window();">

JS：

function print_window(){
  window.print();
  setTimeout(function () { 
    window.open('', '_self', '');
    window.close();
  }, 100);
}

它也适用于IE 10

Answer 13

实施window.onbeforeprint和window.onafterprint

window.print（）之后的window.close（）调用在Chrome v 78.0.3904.70中不起作用

为此，我使用亚当的答案进行了简单的修改：

     function print() {
    (function () {
       let afterPrintCounter = !!window.chrome ? 0 : 1;
       let beforePrintCounter = !!window.chrome ? 0 : 1;
       var beforePrint = function () {
          beforePrintCounter++;
          if (beforePrintCounter === 2) {
             console.log('Functionality to run before printing.');
          }
       };
       var afterPrint = function () {
          afterPrintCounter++;
          if (afterPrintCounter === 2) {
             console.log('Functionality to run after printing.');
             //window.close();
          }
       };
       if (window.matchMedia) {
          var mediaQueryList = window.matchMedia('print');
          mediaQueryList.addListener(function (mql) {
             if (mql.matches) {
                beforePrint();
             } else {
                afterPrint();
             }
          });
       }
       window.onbeforeprint = beforePrint;
       window.onafterprint = afterPrint;
    }());
    //window.print(); //To print the page when it is loaded
 }

我在这里打电话：

<body onload="print();">

这对我有用。请注意，我对这两个功能都使用了计数器，以便可以在不同的浏览器中处理此事件（在Chrome中触发两次，在Mozilla中触发一次）。要检测浏览器，可以参考this answer

Answer 14

这很困难，因为打印后浏览器的行为不同。桌面版Chrome浏览器内部处理打印对话框，因此不会在打印后转移焦点，但是afterprint事件在这里可以正常使用（目前为81.0）。另一方面，移动设备和大多数其他浏览器上的Chrome浏览器在打印后转移了焦点，并且afterprint事件在这里无法始终如一地工作。鼠标移动事件在移动设备上不起作用。

所以Detect if it is Desktop Chrome，如果是，请使用afterprint event。如果否，请使用focus based detection。您还可以结合使用鼠标移动事件（仅适用于台式机），以涵盖更多浏览器和更多场景。

Answer 15

您真的无法确定用户是否单击了print的{{1}}按钮，因为他们都触发了同一事件cancel或onafterprint，我认为这很愚蠢，为什么不区分这两个事件？

如何检测window.print（）完成

15 个答案: