前端触发打印操作后如何调用后端接口修改数据库记录

你可以根据业务对标记精度的要求选择以下两种方案：

方案1：点击打印按钮即标记（不校验最终是否确认打印） #

实现成本最低，直接在原有打印逻辑中新增后端接口调用即可，适合对标记准确性要求不高的场景：

function printDiv (divName) {
    // 调用后端标记接口，可替换为你项目中使用的ajax/axios请求方法
    fetch('/api/user/print-mark', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 补充项目所需的身份校验头，如token等
        },
        body: JSON.stringify({
            // 补充业务所需参数，如用户ID、打印内容ID等
        })
    })

    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

方案2：打印对话框关闭后标记（精度更高） #

借助浏览器原生afterprint事件实现，该事件会在用户关闭打印对话框（点击确认/取消都会触发）时执行，适合需要确认用户已经触发打印流程的场景。
注意：你原有逻辑直接替换document.body.innerHTML会导致原页面所有绑定的DOM事件失效，以下方案用隐藏iframe实现打印，不会影响原页面功能：

function printDiv(divName) {
    const printContents = document.getElementById(divName).innerHTML;
    // 创建隐藏iframe，不干扰原页面
    const printIframe = document.createElement('iframe');
    printIframe.style.cssText = 'position:absolute;left:-9999px;top:-9999px;width:0;height:0';
    document.body.appendChild(printIframe);

    // 写入待打印内容
    const iframeWin = printIframe.contentWindow;
    iframeWin.document.write(printContents);
    iframeWin.document.close();

    // 监听打印对话框关闭事件
    iframeWin.addEventListener('afterprint', () => {
        // 调用后端标记接口
        fetch('/api/user/print-mark', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 补充身份校验头
            },
            body: JSON.stringify({
                // 补充业务参数
            })
        })
        // 销毁临时iframe
        document.body.removeChild(printIframe);
    })

    // 触发打印
    iframeWin.print();
}

补充说明 #

目前Web标准没有提供区分用户点击「确认打印」还是「取消」的原生API，如果需要100%校验用户实际完成了打印操作，需要搭配客户端插件、硬件对接等特殊方案实现，普通Web场景下以上两种方案可覆盖绝大多数业务需求。

内容的提问来源于stack exchange，提问作者R-S