如何检测 window.print() 完成

IT技术 javascript jquery
2021-01-27 22:40:19

在我的应用程序中,我尝试为用户打印一个凭证页面,如下所示:

  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

如何确定弹出打印窗口何时关闭或打印完成?

6个回答

您可以收听 afterprint 事件。

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/

无论用户是否确认打印,都会调用 onafterprint。如何判断用户是否确认打印?
2021-03-15 22:40:19
在 IE 11 matchMedia 上存在但侦听器从不触发
2021-03-23 22:40:19
IE 7 没有(等不及它消失了)。onafterprint在打印对话框打开后立即启动。那是我的经验,至少。
2021-03-25 22:40:19
请记住,媒体查询侦听器将afterPrint()立即触发它不会等到打印对话框关闭,这就是为什么我的答案mouseover在使用媒体查询解决方案时会监听...
2021-04-02 22:40:19
在 IE 11 上 onafterprint 在打印对话框出现之前触发(显然,没有打印)
2021-04-04 22:40:19

在铬 (V.35.0.1916.153 m) 上试试这个:

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

对我很有用。用户完成打印对话框后,它将关闭窗口。

接受的答案适用于很少的浏览器。在打印之后直接放置 window.close 会导致窗口在打印对话框之前消失。但是,使用 setTimeout 会导致关闭在事件队列中排队,100 毫秒超时实际上不是计时问题,计时器将被阻塞,直到打印对话框关闭,此时 100 毫秒计时器启动。一个更好的解决方案。
2021-03-14 22:40:19
感谢您的回答,我找到了一个简单的解决方案:我在打印之前添加了一个带有 'window.open('', '_self', '');´ 的新答案
2021-03-18 22:40:19
这在 Android 上的 Chrome v68 之后不再有效。您需要将超时延长到 500 毫秒才能出现打印对话框,然后,如果您更换打印机,窗口已经关闭,浏览器无法再刷新。
2021-03-22 22:40:19
我认为这是最简单的解决方案。我喜欢!
2021-04-01 22:40:19
优秀的!适用于 Firefox 51.0.1 和 Chrome 54.0.2840.90
2021-04-11 22:40:19

兼容 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).one('mousemove', window.onafterprint);
    }, 1);

</script>
@JayDadhania 这不是打字错误
2021-03-24 22:40:19
那里有轻微的错字,$(window).one()应该是$(window).on()无论如何,很好的解决方案!
2021-03-30 22:40:19

请参阅https://stackoverflow.com/a/15662720/687315作为一种解决方法,您可以afterPrintwindow.mediaMatchAPI 指示媒体没有更长的匹配“打印”(Firefox 和 Chrome)。

请记住,用户可能已经或可能没有实际打印过文档。此外,如果您window.print()在 Chrome 中调用过于频繁,甚至可能不会提示用户进行打印。

您可以通过将 window.print() 放入另一个函数中来检测它何时完成

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

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

在 Firefox、谷歌浏览器、IE 中测试

您所做的只是将 window.print() 的返回值传递给另一个函数,当您调用 onPrintFinished 时,当然 window.print() 将首先执行,但前提是浏览器提供了同步 print() 方法(最新例如,linux 上的 firefox 提供了这个) onPrintFinished 函数将在打印对话框关闭后执行,在其他浏览器(例如最新的 Chromium)上,print() 方法是异步的,所以这是无用的。
2021-03-23 22:40:19
适用于最新版本的 chrome
2021-03-31 22:40:19
现代 Chrome、Safari、FireFox……都支持这样做。
2021-04-01 22:40:19
我不认为这是解决这个问题的好方法,请在afterprint添加事件侦听以关闭窗口。window.onafterprint = function(){ window.close()};
2021-04-08 22:40:19