Selamat siang, saya sedang membangun aplikasi web dimana pengguna dapat mencetak panel dan isinya. Saya menemukan kode seperti yang terlihat di sini dan mengubahnya seperti ini:
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="/id{0}" />', document.styleSheets[i].href);
}
styleSheetConcatTask.delay(500);
});
styleSheetCreateTask.delay(500);
}
});
Saya menempatkan penundaan agar fungsinya lebih konsisten dalam mencetak kisi-kisi dan foto karena memerlukan waktu untuk "merakit" gayanya.
Setelah fungsi "mengumpulkan" data yang akan dicetak, fungsi tersebut memanggil metode pencetakan asli browser. Masalah saya saat ini adalah saya tidak tahu apakah pengguna menekan "Cetak" atau "Batal" di Dialog Cetak browser web mereka.
Apakah ada cara untuk membuat panggilan balik untuk fungsi penggantian ini sehingga saya dapat mengetahui apakah pengguna benar-benar melanjutkan pencetakan atau membatalkan pekerjaan pencetakan?
Bantuan apa pun sangat dihargai.
Perbarui
Saya memeriksa tautan di komentar mindparses di bawah yang mengarahkan saya ke ini halaman. Saya mencoba mengimplementasikan kode dengan melakukan hal di bawah ini:
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();
}
});
}
Dimana form adalah formulir saya dan print adalah fungsi print override di atas.
Semua kode ini ada di pendengar tombol.
Namun, masalah yang saya hadapi dengan solusi ini adalah sepertinya solusi ini hanya berfungsi jika pengguna menekan Ctrl/Command + P. Ini tidak berfungsi jika dialog cetak dipanggil secara terprogram seperti pada fungsi override saya di atas. Kekhawatiran kedua yang saya miliki adalah bahwa fungsi tersebut terpicu ketika pengguna mengeluarkan perintah Ctrl/Command + P. Yang saya ingin tahu adalah kapan pengguna benar-benar mengklik perintah "Cetak" di dialog dan bukan kapan kotak Dialog Cetak muncul.
