Laravel中如何区分window.print的打印与取消按钮点击操作

浏览器原生的afterprint事件无法直接区分用户是点击了打印按钮还是取消按钮，因为两种操作都会触发该事件。可以通过页面可见性变化结合状态标记的方式间接判断，以下是适配你Laravel项目的jQuery实现方案：

实现代码 #

<button class="btn btn-danger print not_print">Print invoice</button>

<script>
$(document).ready(function() {
    let isPrintInitiated = false;
    let hasEnteredPrintMode = false;

    // 点击打印按钮时初始化状态
    $('.print').click(function(){  
        isPrintInitiated = true;
        // 监听页面可见性变化：打印对话框弹出时页面会进入hidden状态
        document.addEventListener('visibilitychange', function handleVisibilityChange() {
            if (isPrintInitiated && document.hidden) {
                hasEnteredPrintMode = true;
            }
            // 移除监听，避免重复触发
            document.removeEventListener('visibilitychange', handleVisibilityChange);
        });
        window.print();
    });

    // 打印对话框关闭后触发的事件
    window.addEventListener('afterprint', (event) => {
        if (isPrintInitiated && hasEnteredPrintMode) {
            console.log('用户完成了打印操作');
            // 在这里添加打印成功后的业务逻辑，比如标记订单为已打印
            // 例如：$.post('/mark-invoice-as-printed', { invoice_id: 123 });
        } else {
            console.log('用户取消了打印操作');
        }
        // 重置状态，确保下次判断准确
        isPrintInitiated = false;
        hasEnteredPrintMode = false;
    });
});
</script>

原理说明 #

1. 点击打印按钮时，标记isPrintInitiated为true，同时监听页面的visibilitychange事件；
2. 当打印对话框弹出时，页面会暂时进入hidden状态，此时将hasEnteredPrintMode设为true；
3. 打印对话框关闭（无论打印还是取消）后触发afterprint事件，通过hasEnteredPrintMode的状态判断用户是否真正进入过打印流程，从而区分打印与取消操作。

注：由于浏览器安全限制，没有100%精准的原生API直接区分两种操作，此方案在Chrome、Firefox、Edge等主流浏览器中均可正常工作。

内容的提问来源于stack exchange，提问作者nadeesha