在网页开发过程中，部分业务场景需要明确用户是否完成了打印操作，或者是否取消了打印流程，比如办公类网页的打印归档、电商平台的订单打印确认等。由于浏览器安全策略的限制，js无法直接读取打印机的硬件状态，只能通过浏览器暴露的打印相关接口和事件来间接判断打印状态。
一、使用浏览器原生打印事件检测
现代浏览器提供了beforeprint和afterprint两个原生事件，分别在打印对话框弹出前和打印流程结束后触发，这是最基础的打印状态检测方式。
1. 事件基本用法
beforeprint事件在浏览器即将发起打印操作时触发，afterprint事件在打印对话框关闭后触发，不管是用户点击打印还是取消打印，都会触发afterprint事件。
// 监听打印前事件
window.addEventListener('beforeprint', function() {
console.log('打印对话框即将弹出');
// 可以在这里记录打印发起的时间
window.printStartTime = Date.now();
});
// 监听打印后事件
window.addEventListener('afterprint', function() {
console.log('打印对话框已关闭');
// 计算打印流程耗时
const duration = Date.now() - window.printStartTime;
console.log('打印流程耗时：' + duration + 'ms');
});
2. 局限性说明
这种方式只能知道打印流程的开始和结束，无法区分用户是点击了打印按钮还是取消了打印，也无法获取打印是否成功执行，只能做基础的流程记录。
二、通过打印窗口交互反馈判断状态
部分场景下可以通过引导用户操作，结合打印窗口的关闭行为来间接判断打印状态，这种方式需要用户配合，准确率相对较高。
1. 实现思路
在触发打印前先弹出提示，告知用户打印完成后需要点击页面上的确认按钮，然后监听afterprint事件，在事件触发后显示确认按钮，用户点击确认则视为打印完成。
// 打印确认按钮元素
const confirmBtn = document.getElementById('print-confirm-btn');
// 初始隐藏确认按钮
confirmBtn.style.display = 'none';
// 触发打印的函数
function startPrint() {
// 先提示用户
alert('即将弹出打印对话框，打印完成后请点击页面上的确认按钮');
// 监听打印后事件
window.addEventListener('afterprint', function afterPrintHandler() {
// 显示确认按钮
confirmBtn.style.display = 'block';
// 移除监听，避免重复触发
window.removeEventListener('afterprint', afterPrintHandler);
});
// 调用打印
window.print();
}
// 确认按钮点击事件
confirmBtn.addEventListener('click', function() {
console.log('用户确认已完成打印');
// 这里可以执行打印完成后的业务逻辑
confirmBtn.style.display = 'none';
});
2. 适用场景
适用于对打印状态准确率要求较高的内部系统场景，用户愿意配合操作，不适合面向普通C端用户的场景。
三、利用打印样式差异检测打印行为
可以通过设置打印样式，在打印时修改页面内容，再通过判断页面内容是否发生变化来间接检测打印是否执行，这种方式属于间接推断，准确率有限。
1. 实现步骤
首先在CSS中设置打印样式，打印时给页面添加一个隐藏的标记元素，然后在afterprint事件中检查该标记是否存在，判断是否有打印行为发生。
/* 打印样式，只在打印时生效 */
@media print {
/* 添加一个打印标记元素 */
body::after {
content: 'print_marker';
display: block;
height: 0;
overflow: hidden;
}
}
// 检测是否有打印标记
function checkPrintMarker() {
const bodyContent = document.body.innerHTML;
return bodyContent.includes('print_marker');
}
window.addEventListener('afterprint', function() {
if (checkPrintMarker()) {
console.log('检测到打印行为发生');
} else {
console.log('未检测到打印行为');
}
});
2. 注意事项
这种方式依赖于打印样式的渲染，部分浏览器可能不会完全应用打印样式，导致检测结果不准确，仅可作为辅助判断方式。
四、不同方法对比
以下是几种常见打印状态检测方法的对比，方便开发者根据需求选择：
| 检测方法 | 准确率 | 实现复杂度 | 适用场景 |
|---|---|---|---|
| 原生打印事件 | 低 | 低 | 仅需记录打印流程触发和结束的场景 |
| 用户交互反馈 | 高 | 中 | 内部系统、需要明确打印结果的场景 |
| 打印样式差异检测 | 中 | 中 | 作为辅助判断的补充方案 |
五、注意事项
- 所有打印状态检测都是间接方式，无法100%准确获取打印机的真实状态，比如打印机缺纸、卡纸等硬件问题无法通过js检测到。
- 不同浏览器对打印事件的支持程度略有差异，建议在主流浏览器（Chrome、Edge、Firefox）中测试后再上线。
- 不要过度依赖打印状态检测做核心业务逻辑，建议作为辅助功能使用，避免因为检测失败导致业务流程中断。
js打印机检测网页打印状态print_eventbeforeprint修改时间：2026-07-10 08:45:34