如何让printThis.js在打印完成或取消后执行指定脚本

问题分析 #

你当前的代码存在两个核心问题：

1. 使用了非标准的beforePrintEvent回调名，PrintThis.js的标准打印前回调是beforePrint；
2. 部分旧版本的PrintThis.js中，打印后回调并非afterPrint，而是callback，导致恢复逻辑无法触发。

修正方案（适配新版PrintThis） #

将打印前后的DOM操作逻辑绑定到正确的回调上，确保打印时修改DOM，打印完成后恢复：

// 打印前修改页面DOM
$("#cInfoSpan").attr("colspan", 4);
$(".printSpan").attr("colspan", 2);

const u = uniqueNumber();
$("#chemOrderWrapper").printThis({
    importCSS: false,
    loadCSS: "../css/printBlankChem.css?ver=" + u,
    // 打印对话框关闭后执行恢复逻辑
    afterPrint: function() {                  
        $("#cInfoSpan").attr("colspan", 5);
        $(".printSpan").attr("colspan", 1);
    },
    // 打印前的准备回调（可用于修改克隆的打印元素）
    beforePrint: function($printElement) {
        console.log("打印前准备完成");
        // 若需单独修改打印用的克隆元素，可操作$printElement
        // $printElement.find("#cInfoSpan").attr("colspan", 4);
    }
});

适配旧版PrintThis的方案 #

如果你的PrintThis版本较旧，将afterPrint替换为callback即可：

$("#cInfoSpan").attr("colspan", 4);
$(".printSpan").attr("colspan", 2);

const u = uniqueNumber();
$("#chemOrderWrapper").printThis({
    importCSS: false,
    loadCSS: "../css/printBlankChem.css?ver=" + u,
    // 旧版本用callback作为打印后回调
    callback: function() {                  
        $("#cInfoSpan").attr("colspan", 5);
        $(".printSpan").attr("colspan", 1);
    },
    beforePrint: function($printElement) {
        console.log("打印前准备完成");
    }
});

优化方案（避免页面DOM闪烁） #

如果不需要在打印时修改页面显示，仅需打印内容使用修改后的布局，可直接在beforePrint中修改克隆的打印元素，无需修改原DOM，也就不需要恢复：

const u = uniqueNumber();
$("#chemOrderWrapper").printThis({
    importCSS: false,
    loadCSS: "../css/printBlankChem.css?ver=" + u,
    beforePrint: function($printElement) {
        // 仅修改打印用的克隆元素，页面DOM保持不变
        $printElement.find("#cInfoSpan").attr("colspan", 4);
        $printElement.find(".printSpan").attr("colspan", 2);
        console.log("打印前准备完成");
    }
});

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