ExtJS 4 - 检测用户是否按下“打印”在打印对话框上被称为程序化 [英] ExtJS 4 - detecting if the user pressed "Print" on the print dialog that was called programatically
问题描述
美好的一天，我正在构建一个Web应用程序，其中用户可以打印面板及其内容。我发现一个代码如这里所示，并将其调整为：
Ext.define（'My_app_name.override.form。面板'，{
覆盖：'Ext.form.Panel'，
print：function（pnl）{
if（！pnl）{
pnl = this;
}
//实例化隐藏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标记
//在隐藏的iframe中实例化应用程序样式表
var printTask = new Ext.util.DelayedTask（function（）{
//打印iframe
cw。 print（）;
//销毁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>'，样式表，标记）;
//输出到iframe
cw。 document.open（）;
cw.document.write（str）;
cw.document.close（）;
//删除具有hardcoded height属性的style属性
// cw.document.getElementsByTagName（'DIV'）[0] .removeAttribute（'style'）;
printTask.delay（500）;
}）;
var markUpTask = new Ext.util.DelayedTask（function（）{
//获取面板的内容并删除硬编码的溢出属性
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（）{
//各种样式覆盖
样式表+ =''.concat （
< style>，
.x-panel-body {overflow：visible！important;}，
//实验 - 嵌入面板后的页面休息
// .x-panel {page-break-after：always; margin-top：10px}，
< / style>
）;
markUpTask。 （$）
var styleSheetCreateTask = for（var i = 0; i< document.styleSheets.length; i ++）{
stylesheets + = Ext.String.format（'< link rel =stylesheethref ={0}/> ;'，document.styleSheets [i] .href）;
}
styleSheetConcatTask.delay（500）;
}）;
styleSheetCreat eTask.delay（500）;
}
}）;
我把延迟放在让打印出网格和照片的时候更加一致，因为它需要时间从样式中装配。
功能汇编要打印的数据后，将调用浏览器本机打印方法。我现在的问题是，我不知道用户是否在他们的网络浏览器打印对话框中按打印或取消。
有没有办法为这个覆盖功能创建一个回调，所以我可以知道用户真的是通过打印推送还是取消了打印作业？
非常感谢任何帮助。
更新
我检查了这个链接，在下面的。我试图通过执行以下操作来实现代码：
var beforePrint = function（）{
console.log '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 does not match'）;
afterPrint（）;
}
}）;
}
其中表单我的表单和 print 是上面的打印覆盖功能。
所有这些代码都在按钮侦听器中。但是，我使用这个解决方案的问题是，如果用户按下Ctrl / Command + P键，它似乎工作正常。如果打印对话框是在我上面的覆盖功能中编程调用。第二个问题是，当用户发出Ctrl / Command + P命令时，该功能将触发。我想要的是知道用户真正点击对话框中的打印命令，而不是当打印对话框出现时。
虽然很容易控制打印对话框，但是无法检测文档是否真的以十字形打印浏览器时尚。打印对话框中发生的情况由操作系统控制，JavaScript不容易访问。
我发现两个有关此问题的资源：
第二个链接可能很有趣，因为它可以允许您显示您可以完全控制的自己的打印对话框。
我意识到这只是部分答案，我不知道这个问题是否有答案。
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?
Any help is very much appreciated.
Update
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();
}
});
}
Where form is my form and print is the print override function above.
All of these codes are in a button listener.
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.
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屋！
