在我的应用程序中，我尝试为用户打印出一个凭证页面，如下所示：
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
如何确定弹出打印窗口何时关闭或打印完成？
您可以收听 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/
在 chrome (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。作为一种解决方法，您可以在API 指示媒体没有afterPrint后，在窗口（Firefox 和 IE）上监听事件并监听文档上的鼠标移动（指示用户已关闭打印对话框并返回页面）window.mediaMatch更长的匹配“打印”（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 在 chrome 上同步运行 .. 在您的控制台中尝试此操作
window.print();
console.log("printed");
除非用户关闭（取消/保存/打印）打印对话框，否则不会显示“打印”。
我不确定 IE 或 Firefox 是否会稍后检查和更新
这实际上在 chrome 中对我有用。我很惊讶。
jQuery(document).bind("keyup keydown", function(e){
if(e.ctrlKey && e.keyCode == 80){
Print(); e.preventDefault();
}
});
其中 Print 是我编写的调用 window.print(); 的函数。如果你禁用 Print(); 它也可以作为一个纯粹的拦截器；
正如 user3017502 在这里指出的那样
window.print() 将暂停，因此您可以像这样添加 onPrintFinish 或 onPrintBegin
function Print(){
onPrintBegin
window.print();
onPrintFinish();
}
鉴于您希望等待打印对话框消失，我会在窗口上使用焦点绑定。
print();
var handler = function(){
//unbind task();
$(window).unbind("focus",handler);
}
$(window).bind("focus",handler);
通过在处理函数中加入 unbind，我们可以防止焦点事件与窗口保持绑定。
使用 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 url 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 event。如果否，使用基于焦点的检测。您还可以结合使用鼠标移动事件（仅适用于桌面），以覆盖更多浏览器和更多场景。
检测打印是否完成并关闭打印窗口的最简单方法：
window.onafterprint = function(){
window.onfocus = function(){
window.close();
}
};
实现 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 中触发一次）。要检测浏览器，您可以参考此答案