สวัสดี ฉันกำลังสร้างเว็บแอปพลิเคชันที่ผู้ใช้สามารถพิมพ์แผงและเนื้อหาในนั้นได้ ฉันพบรหัส ดังที่เห็นที่นี่ และปรับแต่งดังนี้:
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="/th{0}" />', document.styleSheets[i].href);
}
styleSheetConcatTask.delay(500);
});
styleSheetCreateTask.delay(500);
}
});
ฉันวางความล่าช้าเพื่อให้ฟังก์ชันมีความสม่ำเสมอมากขึ้นในการพิมพ์เส้นกริดและภาพถ่าย เนื่องจากต้องใช้เวลาในการ "ประกอบ" จากสไตล์
หลังจากที่ฟังก์ชัน "รวบรวม" ข้อมูลที่จะพิมพ์แล้ว จะเรียกวิธีการพิมพ์แบบเนทิฟของเบราว์เซอร์ ปัญหาของฉันตอนนี้คือฉันไม่รู้ว่าผู้ใช้กด "พิมพ์" หรือ "ยกเลิก" ในกล่องโต้ตอบการพิมพ์ของเว็บเบราว์เซอร์หรือไม่
มีวิธีสร้างการเรียกกลับสำหรับฟังก์ชันแทนที่นี้หรือไม่ เพื่อให้ฉันสามารถทราบได้ว่าผู้ใช้ดำเนินการพิมพ์จริงหรือยกเลิกงานพิมพ์หรือไม่
ความช่วยเหลือใด ๆ ที่ชื่นชมอย่างมาก
อัปเดต
ฉันตรวจสอบลิงก์ในความคิดเห็นของ 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 สิ่งที่ฉันต้องการคือรู้ว่าเมื่อผู้ใช้คลิกที่คำสั่ง "พิมพ์" ในกล่องโต้ตอบจริงๆ ไม่ใช่เมื่อกล่องโต้ตอบการพิมพ์ปรากฏขึ้น
