afterprint

16 March, 2023

Contributors

Milsaware

@milsaware

About

The afterprint event is triggered when a page has finished printing or the print preview has been closed. This event can be used to perform additional actions or provide feedback to the user after they have printed a document. The afterprint event is part of a set of events related to printing, including beforeprint and print.

One common use case for the afterprint event is to display a message or alert to the user after they have printed a document. For example, an app could use the afterprint event to display a message that says "Thank you for printing!" or to offer the user additional resources related to the printed document.

The afterprint event can also be used to perform other actions after the user has printed a document. For example, an app could use the event to update a database or perform some other server-side action. The afterprint event can be a useful tool for developers who want to provide additional functionality to their users after they have printed a document from their website.

Event listener

Here's an example of how you can use the afterprint event:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>afterprint example</title>
    </head>
    <body>
        <h1>Example Heading</h1>
        <p>Example content</p>
    </body>
</html>

JavaScript

// Handle the afterprint event
window.addEventListener('afterprint', function() {
    console.log('Printing has finished');
});

// Print the page
window.print();

Here, an event listener is added to the window object to handle the afterprint event. When the event is triggered, the function logs a message to the console.

The page is then printed using the window.print() method, which opens the print dialog and prints the page. After the print dialog is closed or the print preview is closed, the afterprint event is triggered and the function is executed.

Property

Here is an example of using the onafterprint property to listen for the afterprint event:

// Get the print button element
const printButton = document.getElementById("print-button");

// Add an event listener for the click event
printButton.addEventListener("click", function() {
    // Print the page
    window.print();
});

// Add an event listener for the afterprint event
window.onafterprint = function() {
    // Display a message to the user
    alert("Thank you for printing!");
};

Here, we first get a reference to a print button element on the page. We then add an event listener to the button for the click event, so that when the user clicks the button, the window.print() function is called, which will initiate the printing process.

We then add an event listener for the onafterprint event on the window object. This event will be triggered after the user has finished printing the document. In the event handler function, we display an alert message to the user, thanking them for printing.

Inline

The afterprint event can also be used in inline HTML using the onafterprint attribute. For example:

<body onafterprint="console.log('Printing has finished')">
     <!-- Page content -->
</body>

Here, the onafterprint attribute is added to the body element to handle the afterprint event. When the event is triggered, the function specified in the attribute is executed.

Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.

Programmatic trigger

We can also trigger afterprint programmatically using the window.matchMedia() method. This method returns a MediaQueryList object that can be used to check the status of a media query, such as whether the page is being printed or not.

Here's an example of how you can use window.matchMedia() to trigger the afterprint event programmatically:

// Check if the page is being printed
let mediaQueryList = window.matchMedia('print');

// Handle the change event
mediaQueryList.addListener(function(mql) {
    if (!mql.matches) {
        console.log('Printing has finished');
        window.removeEventListener('afterprint', handleAfterPrint);
    }
});

// Trigger the afterprint event programmatically
let handleAfterPrint = function() {
    console.log('Printing has finished');
};

window.addEventListener('afterprint', handleAfterPrint);
window.print();

Here, the window.matchMedia() method is used to check if the page is being printed. An event listener is then added to the MediaQueryList object to handle the change event. When the change event is triggered and the media query no longer matches, the afterprint event is considered to have occurred, and the function logs a message to the console.

The afterprint event is then triggered programmatically using the window.addEventListener() method and the function specified in the argument. The window.print() method is used to open the print dialog and print the page.

When the print dialog is closed or the print preview is closed, the afterprint event is triggered, and the function specified in the window.addEventListener() method is executed. In this case, the function logs a message to the console.

Note that in this example, the window.removeEventListener() method is used to remove the event listener after the event has been triggered, to prevent it from being executed multiple times.

javascript