Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Print events

afterprint イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。

beforeprint および afterprint イベントを使用すると、印刷が開始される前にページのコンテンツを変更し（例えば、バナーを除去するなど）、そして印刷が完了した後にそれらの変更を元に戻すことができます。一般的には、CSS の @media printアットルールを使用することを推奨しますが、場合によってはこれらのイベントを使用する必要があることがあります。

表示・ナビゲーション

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
afterprint_event
63
12
6
13
63
13
beforeprint_event

beforeprint イベントは、関連する文書が印刷される直前や、印刷プレビューが開く直前に発生します。
63
12
6
13
63
13
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
window.addEventListener("afterprint", (event) => {
  console.log("After print");
});

実務での使いどころ

  • Print events の活用

    afterprint イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。

注意点

  • 古いブラウザでは対応していない場合がある。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク