beforeprint

16 March, 2023

Contributors

Milsaware

@milsaware

About

The beforeprint event is triggered when the user initiates a print operation on the current page. This event can be used to perform actions before the print dialog box is displayed, such as hiding or showing certain elements on the page or adjusting the layout to better fit a printed page.

The beforeprint event is part of the window object, which means it can be captured using the addEventListener method. When the beforeprint event is triggered, the event handler function is executed, allowing you to perform any necessary actions before the print operation proceeds. For example, you could use the beforeprint event to hide certain elements on the page that are not necessary for printing, or to adjust the margins and spacing of the page to ensure that the printed output is legible and well-formatted.

Event listener

Here's an example of how to use the beforeprint event with an event listener:

CSS

.hide-on-print {
    display: block;
}

@media print {
    .hide-on-print {
        display: none;
    }
}

HTML

<div id="myElement" class="hide-on-print">
    This element will be hidden when the page is printed.
</div>

JavaScript

window.addEventListener('beforeprint', () => {
    console.log('The page is about to be printed!');
});

Here, we're using the window object to add an event listener for the beforeprint event. When the event is triggered, the function passed to the event listener will be executed. In this case, we're logging a message to the console when the event is triggered.

We're also using CSS media queries to hide the myElement div when the page is printed. When the page is printed, any element with the hide-on-print class will be hidden.

When you run this code and try to print the page, the message "The page is about to be printed!" will be logged to the console. You can also see that the myElement div is hidden on the printed page.

Property

There is also an onbeforeprint property that can be used to attach an event listener directly to the beforeprint event. This property can be set on the window object to execute a function when the beforeprint event is triggered:

window.onbeforeprint = () => {
    console.log('The user is about to print the page.');
    // Perform any necessary actions before the print operation.
};

Here, the onbeforeprint property is set to a function that logs a message to the console when the beforeprint event is triggered. You can replace the console.log statement with any code that you want to execute in response to the beforeprint event.

Inline

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

CSS

.hide-on-print {
    display: block;
}
  
@media print {
    .hide-on-print {
        display: none;
    }
}

HTML

<body onbeforeprint="beforePrintHandler()">
    <div id="myElement" class="hide-on-print">
      This element will be hidden when the page is printed.
    </div>

    <button onclick="window.print()">Print</button>
</body>

JavaScript

function beforePrintHandler() {
    console.log('The page is about to be printed!');
}

This example includes a button element to trigger the printing of the page, a div element with a hide-on-print class that will be hidden when the page is printed, and an inline beforeprint event listener on the body element that will execute the beforePrintHandler() function when the beforeprint event is triggered.

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

There is no programmatic beforeprint() method in JavaScript. The beforeprint event is triggered automatically by the browser when the user initiates a print operation, and there is no way to programmatically trigger it.

However, you can use the window.matchMedia() method in JavaScript to detect when the print media type is active, and execute code accordingly. Here's an example:

function printHandler(mediaQueryList) {
    if (mediaQueryList.matches) {
        console.log('The page is about to be printed!');
        // Execute code for beforeprint event
    }
}

let mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(printHandler);

Here, we're using the window.matchMedia() method to create a MediaQueryList object that represents the current state of the print media type. We're passing the print media query as an argument to the method, which will return a MediaQueryList object that is either in a matches or does not match state.

We're then using the addListener() method of the MediaQueryList object to attach a listener function (printHandler() in this case) to be executed when the state of the MediaQueryList object changes.

Inside the printHandler() function, we're checking whether the matches property of the MediaQueryList object is true, which indicates that the print media type is currently active. If it is, we're logging a message to the console and executing any code that we want to run for the beforeprint event.

Note that this approach allows you to detect when the print media type is active, but it does not allow you to programmatically trigger the beforeprint event.

javascript