如何检测window.print（）完成

在我的应用程序中，我尝试为用户打印出凭证页面，如下所示：

  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

如何确定关闭弹出式打印窗口或完成打印的时间？

您可以收听印后事件。

https://developer.mozilla.org/zh-CN/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/

在镀铬（V.35.0.1916.153 m）上尝试以下操作：

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

对我来说很棒。用户完成打印对话框后，它将关闭窗口。

与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>

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

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

window.print在chrome上的行为是同步的。在控制台中尝试

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

除非用户关闭（取消/保存/打印）打印对话框，否则不会显示“已打印”。

这是有关此问题的更详细说明。

我不确定IE或Firefox稍后是否会检查和更新

您只需将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中测试

这实际上对我来说适合Chrome。我很惊讶。

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

我写的其中Print是一个调用window.print（）;的函数。如果禁用Print（），它也可以用作纯阻止程序。

如用户3017502此处所述

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

function Print(){
    onPrintBegin
    window.print();
    onPrintFinish(); 
}

考虑到您希望等待打印对话框消失，我将在窗口上使用焦点绑定。

print();

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

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

通过在处理程序函数中加入取消绑定，我们可以防止焦点事件保持与窗口的绑定。

使用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();

完成打印后窗口关闭。

经过IE，FF，Chrome的测试，可以正常运行。

    setTimeout(function () { window.print(); }, 500);
    window.onfocus = function () { setTimeout(function () { window.close(); }, 500); }

它对我有用$（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');
    });
}

我认为窗口聚焦方法是正确的。这是一个示例，我想在一个隐藏的iframe中打开PDF网址blob并进行打印。打印或取消后，我想删除iframe。

/**
 * printBlob will create if not exists an iframe to load
 * the pdf. Once the window is loaded, the PDF is printed.
 * It then creates a one-time event to remove the iframe from
 * the window.
 * @param {string} src Blob or any printable url.
 */
export const printBlob = (src) => {
  if (typeof window === 'undefined') {
    throw new Error('You cannot print url without defined window.');
  }
  const iframeId = 'pdf-print-iframe';
  let iframe = document.getElementById(iframeId);
  if (!iframe) {
    iframe = document.createElement('iframe');
    iframe.setAttribute('id', iframeId);
    iframe.setAttribute('style', 'position:absolute;left:-9999px');
    document.body.append(iframe);
  }
  iframe.setAttribute('src', src);
  iframe.addEventListener('load', () => {
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    const infanticide = () => {
      iframe.parentElement.removeChild(iframe);
      window.removeEventListener('focus', infanticide);
    }
    window.addEventListener('focus', infanticide);
  });
};

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

因此，检测是否为Desktop Chrome，如果是，请使用afterprint事件。如果否，请使用基于焦点的检测。您还可以结合使用鼠标移动事件（仅适用于台式机），以涵盖更多浏览器和更多方案。

您真的不知道用户是否单击了按钮printof，cancel因为他们都触发了同一事件，onafterprint或者afterprint 我认为这非常愚蠢，为什么不区分这两个事件？

实现window.onbeforeprint和window.onafterprint

在Chrome v 78.0.3904.70中window.print（）之后无法使用window.close（）调用

为了解决这个问题，我使用亚当的答案进行了简单的修改：

     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中触发一次）。要检测浏览器，您可以参考此答案