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
Cakephp Does Not Use My Models
Check If the Query Results Empty Row MySQLi
PHP Keep Checkbox Checked After Submitting Form
Parametrized Pdo Query and 'Limit' Clause - Not Working
Autoloading Classes in PHPunit Using Composer and Autoload.Php
Calling a Particular PHP Function on Form Submit
Disabling Strict Standards in PHP 5.4
Is There a Good PHP Geolocation Service
PHP Simplexml Namespace Problem
How to Upload and Parse a CSV File in PHP
How to Add a New Method to a PHP Object on the Fly
Preg_Match() Unknown Modifier '[' Help
Regex Matching Links Without <A> Tag
How to Pass an Array in Get in PHP