ExtJS 4-检测用户是否按下了“打印"按钮.在以编程方式调用的打印对话框上 [英] ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
问题描述
美好的一天，我正在构建一个Web应用程序，用户可以在其中打印面板及其内容.我找到了一个代码
Good day, I am building a web application wherein the user can print a panel and its contents. I found a code as seen here and tweaked it as such:
Ext.define('My_app_name.override.form.Panel', {
override: 'Ext.form.Panel',
print: function(pnl) {
if (!pnl) {
pnl = this;
}
// instantiate hidden iframe
var iFrameId = "printerFrame";
var printFrame = Ext.get(iFrameId);
if (printFrame === null) {
printFrame = Ext.getBody().appendChild({
id: iFrameId,
tag: 'iframe',
cls: 'x-hidden',
style: {
display: "none"
}
});
}
var cw = printFrame.dom.contentWindow;
var stylesheets = "";
var markup;
// instantiate application stylesheets in the hidden iframe
var printTask = new Ext.util.DelayedTask(function(){
// print the iframe
cw.print();
// destroy the iframe
Ext.fly(iFrameId).destroy();
});
var strTask = new Ext.util.DelayedTask(function(){
var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);
// output to the iframe
cw.document.open();
cw.document.write(str);
cw.document.close();
// remove style attrib that has hardcoded height property
// cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
printTask.delay(500);
});
var markUpTask = new Ext.util.DelayedTask(function(){
// get the contents of the panel and remove hardcoded overflow properties
markup = pnl.getEl().dom.innerHTML;
while (markup.indexOf('overflow: auto;') >= 0) {
markup = markup.replace('overflow: auto;', '');
}
while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
}
strTask.delay(500);
});
var styleSheetConcatTask = new Ext.util.DelayedTask(function(){
// various style overrides
stylesheets += ''.concat(
"<style>",
".x-panel-body {overflow: visible !important;}",
// experimental - page break after embedded panels
// .x-panel {page-break-after: always; margin-top: 10px}",
"</style>"
);
markUpTask.delay(500);
});
var styleSheetCreateTask = new Ext.util.DelayedTask(function(){
for (var i = 0; i < document.styleSheets.length; i++) {
stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
}
styleSheetConcatTask.delay(500);
});
styleSheetCreateTask.delay(500);
}
});
我放置了一些延迟，以使该功能在打印网格和照片时更加一致，因为从样式中组装"起来需要时间.
I placed the delays to let the function be more consistent in printing out grids and photos as it takes time to "assemble" from the styles.
函数组合"要打印的数据后，它将调用浏览器的本机打印方法.我现在的问题是，我不知道用户是否在其网络浏览器的打印对话框"中按打印"或取消".
After the function "assembles" the data to be printed, it calls the browsers native printing methods. My issue right now is that I don't know if I the user presses "Print" or "Cancel" in their web browsers Print Dialog.
是否有一种方法可以为此重写函数创建回调，这样我才能知道用户是否确实完成了打印或取消了打印作业?
Is there a way to create a callback for this override function so I can know if the user really did push through with printing or cancelled the printing job?
非常感谢您的帮助.
更新
我检查了以下我到此页面.我尝试通过以下方式实现代码:
I checked the link in mindparses' comment below which led me to this page. I tried to implement the code by doing such below:
var beforePrint = function() {
console.log('before print');
form.print();
};
var afterPrint = function() {
console.log('after print');
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('mql matches');
beforePrint();
} else {
console.log('mql did NOT match');
afterPrint();
}
});
}
其中 form 是我的表单，而 print 是上面的打印替代功能.
Where form is my form and print is the print override function above.
所有这些代码都在按钮侦听器中.
All of these codes are in a button listener.
但是，此解决方案的问题在于，它似乎仅在用户按下Ctrl/Command + P时才起作用.如果像在上面的覆盖函数中那样以编程方式调用打印对话框，则它不起作用.我要担心的第二个问题是，当用户发出Ctrl/Command + P命令时，该函数将触发.我想知道的是用户何时真正单击对话框中的打印"命令，而不是何时出现打印对话框".
However, the issue I have with this solution is that it only seems to work if the user presses Ctrl/Command + P. It does not work if the print dialog is programatically called like in my override function above. A second concern I have is that the function triggers when the user issues the Ctrl/Command + P command. What I want is to know when the user really clicks on the "Print" command in the dialog and not when a Print Dialog box appears.
推荐答案
虽然很容易控制打印对话框，但无法检测文档是否真的以跨浏览器的方式打印.打印对话框中发生的事情由操作系统控制，JavaScript无法轻易访问.
While it is easy to control the print dialog, it is not possible to detect if the document was really printed in a cross browser fashion. What is happening in the print dialog is controlled by the operating system and is not readily accessible by JavaScript.
我找到了两个有关此问题的资源:
I found two resources about this issue :
第二个链接可能很有趣，因为它可以让您显示可以完全控制的打印对话框.
The second link might be interesting because it could allow you to show your own print dialog that you can fully control.
我意识到这只是部分答案，我不知道这个问题是否有答案.
I'm conscious that this is only a partial answer, and I don't know if this problem does have an answer.
这篇关于ExtJS 4-检测用户是否按下了“打印"按钮.在以编程方式调用的打印对话框上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
