JavaScript HTML DOM Events: afterprint

The afterprint event occurs when the page starts printing and only fires after the confirmation dialog is closed. It is used to execute additional logic after printing (e.g., write to a log, send statistics, etc.).

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>afterprint – interactive demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            padding: 20px;
        }

        .box {
            max-width: 800px;
            margin: 30px auto;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
        }

        h2 {
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }

        button {
            margin: 4px 0;
            padding: 8px 16px;
            border: 1px solid #777;
            border-radius: 4px;
            cursor: pointer;
            background: #fff;
            color: #333;
        }

        button:hover {
            background: #e5e7eb;
        }

        .log {
            margin-top: 12px;
            padding: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            max-height: 180px;
            overflow: auto;
            font-family: monospace;
            font-size: 13px;
            background: #f3f4f6;
            color: #333;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>JavaScript DOM Event: <code>afterprint</code></h2>
    <p>When the user finishes printing (or closes the confirmation dialog), the <code>afterprint</code> event fires.
       In this example we log the event.</p>

    <button id="printBtn">Print page</button>

    <div class="log" id="log"></div>
</div>

<script>
    // Simple logger
    const logBox = document.getElementById("log");
    const log = (msg) => {
        const line = document.createElement("div");
        line.textContent = new Date().toLocaleTimeString() + ": " + msg;
        logBox.appendChild(line);
        logBox.scrollTop = logBox.scrollHeight;
    };

    // Print button
    document.getElementById("printBtn").addEventListener("click", () => {
        log("User triggered printing (window.print()).");
        window.print(); // opens the browser print dialog
    });

    // afterprint handler
    window.addEventListener("afterprint", (e) => {
        log("afterprint – printing has finished.");
        // Additional post‑print logic (e.g., sending analytics) could go here.
    });
</script>
</body>
</html>

RESULT