Onbeforeprint() and Onafterprint() Equivalent for Non Ie Browsers

onbeforeprint() and onafterprint() equivalent for non IE browsers

I m not sure other browsers will allow you to. You could of course specify an image somewhere in a print stylesheet, which probably only will be called on a print, for the onbeforeprint

How to detect window.print() finish

You can listen to the afterprint event.

https://developer.mozilla.org/en-US/docs/Web/API/window.onafterprint

window.onafterprint = function(){
console.log("Printing completed...");
}

It may be possible to use window.matchMedia to get this functionality in another way.

(function() {

var beforePrint = function() {
console.log('Functionality to run before printing.');
};

var afterPrint = function() {
console.log('Functionality to run after printing');
};

if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

}());

Source: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

execute javascript when printing page

You can't, except for IE browsers. No other browser has a before print event. You can, however, target a specific stylesheet to only apply while printing:

<!-- In head -->
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

This stylesheet will be applied before printing. This allows you to perform some amazing changes, including hiding major sections, moving items around, and performing print-only styling, such as page breaks.

Another option is to provide the user with a "Print this Page" button. That button can handle your JavaScript, call window.print(), and revert the changes:

function printMe() {
// perform changes
window.print();
// revert changes
}

The window.print() method always blocks (in every browser I've tested), so it's safe to immediately revert the changes afterward. However, if the user choose to print via the menu or toolbar, you are out of luck.

One way I handled that case in a complex web-app was to have a print stylesheet that hid everything but a special DIV. If the user clicked print, they would get a warning message. If they clicked the print button, then that div would be populated with the correct information. It's not great, but at least they didn't get several pages of garbage.

Detecting browser print event

You can now detect a print request in IE 5+, Firefox 6+, Chrome 9+, and Safari 5+ using the following technique:

(function() {
var beforePrint = function() {
console.log('Functionality to run before printing.');
};
var afterPrint = function() {
console.log('Functionality to run after printing');
};

if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());

I go into more detail into what this is doing and what it can be used for at http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/.

What event is fired when window.print() is called?

Well as far as I know, IE has several events line onbeforeprint() and onafterprint() but they are not supported by other browsers. So relying on this is not very good.

Perhaps you can have a print button on your page. Attach to it a handler which executes the ajax call to the server to store the data to the database and on success of this call, call the print() on the window.

Is that what you are looking for ?

iOS 8 Safari print redirect doesn't stop javascript execution

You can use window.matchMedia (caniuse link), combined with window.onbeforeprint and window.onafterprint (for earlier IE support). A good reference for using matchMedia can be found here and here.

To satisfy using matchMedia with iOS, use nested events. First, listen for the media type to change to print. Then, inside that callback, listen for the media to change back to screen.

if (window.matchMedia) {
var printQuery = window.matchMedia('print');
printQuery.addListener(function() {
var screenQuery = window.matchMedia('screen');
screenQuery.addListener(function() {
//actions after print dialog close here
});
});
}


Related Topics



Leave a reply



Submit