我正在构建一个Web应用程序，用户可以在其中打印面板及其内容。我发现了一个代码as seen here，并将其调整为：
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);
}
});我放置延迟是为了让函数在打印出网格和照片时更加一致，因为从样式中“组装”需要时间。
在函数“组装”了要打印的数据之后，它调用浏览器的本地打印方法。我现在的问题是，我不知道用户是否在他们的Web浏览器打印对话框中按下了“打印”或“取消”。
有没有办法为这个覆盖函数创建一个回调函数，这样我就可以知道用户是真的完成了打印还是取消了打印作业？
更新
我检查了which led me to this page下面的mindparses注解中的链接。我尝试通过以下操作来实现代码：
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是上面的打印覆盖函数。
所有这些代码都在一个按钮侦听器中。
然而，在一些情况下，我对这个解决方案的问题是，它似乎只有在用户按Ctrl/Command + P时才起作用。如果打印对话框是像上面我的覆盖函数那样以编程方式调用的，它就不起作用。我的第二个问题是，当用户发出Ctrl/Command + P命令时，该函数会触发。我想知道的是，用户真正单击“打印”按钮的时间。命令，而不是在出现“打印”对话框时。
1条答案
按热度按时间7y4bm7vi1#
虽然控制打印对话框很容易，但无法检测文档是否真的以跨浏览器方式打印。打印对话框中发生的事情由操作系统控制，JavaScript无法轻松访问。
我找到了关于此问题的两个资源：
第二个链接可能会很有趣，因为它可以让您显示自己的打印对话框，您可以完全控制。
我意识到这只是一个部分的答案，我不知道这个问题是否有答案。