Javascript 确定是否单击了 Google Chrome 打印预览中的打印/取消按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29912933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determine If Print/Cancel Button in Google Chrome's Print Preview is Clicked
提问by alyssaeliyah
I've been printing my page using the code below:
我一直在使用以下代码打印我的页面：
window.print();
An image below is what the print preview in Google chrome browser looks like. It has two main buttons: printand cancel.
下图是 Google chrome 浏览器中打印预览的样子。它有两个主要按钮：print和cancel。
I want to know if the user has clicked the printor cancelbuttons. What I did uses jquery:
我想知道用户是否点击了print或cancel按钮。我所做的使用jquery：
HTML Code of the Print Preview:
打印预览的 HTML 代码：
<button class="print default" i18n-content="printButton">Print</button>
<button class="cancel" i18n-content="cancel">Cancel</button>
Jquery Code:
查询代码：
$('button > .cancel').click(function (e) {
alert('Cancel');
});
$('button > .print').click(function (e) {
alert('Print');
});
I tried the code above with no luck. What am I missing?
我尝试了上面的代码但没有运气。我错过了什么？
回答by Prashant Kankhara
You can not access Chrome's internal windows (printing dialog in this case) directly from a regular web page.
您无法直接从常规网页访问 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;
}());
Or, If you want to do something when the print preview gets opened, you can try below:
或者，如果您想在打印预览打开时执行某些操作，您可以尝试以下操作：
$(document).bind("keyup keydown", function (e) {
if (e.ctrlKey && e.keyCode == 80) {
setTimeout(function () { CallAfterWindowLoad();}, 5000);
return true;
}
});
function CallAfterWindowLoad()
{
alert("Open and call");
}
Reference: How to capture the click event on the default print menu called by Javascript window.print()
参考： 如何在Javascript window.print() 调用的默认打印菜单上捕获点击事件
Maybe if you provide your requirements for this two buttons click event, we can provide you an alternate solution.
也许如果您提供对这两个按钮单击事件的要求，我们可以为您提供替代解决方案。
回答by Madness
it is very easily possible:
这很容易：
<body onafterprint="myFunction()">
The myFunction() that you can define within a tag will be fire when either the printing job is done or the cancel button was pressed.
当打印作业完成或按下取消按钮时，您可以在标签内定义的 myFunction() 将被触发。
回答by ekuusela
As far as I know, the print preview is not part of any documentyour JS can access. These might interest you:
据我所知，打印预览不是document您的 JS 可以访问的任何内容的一部分。这些可能会让您感兴趣：
ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
回答by JayBee Rosalinda
This should do the trick. I've used jQuery v2.2.0 which is included in the html file.
这应该可以解决问题。我使用了包含在 html 文件中的 jQuery v2.2.0。
$("#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");
}
});
I guess this might as well be used as a way to print certain divs in your html. Just hide the bodyelement and only show the div that you want to print with some positioning css. Hope it works in yours. I've tried it and I can say that it worked for me.
我想这也可以用作在 html 中打印某些 div 的方法。只需隐藏body元素并仅显示您要使用一些定位 css 打印的 div。希望它适用于你。我已经试过了，我可以说它对我有用。
