如何检测打印完成或取消状态

嘿，这个需求我太熟悉了——为了保住打印时的页面样式给空输入框填0，打印后再复原，确实得找个能覆盖主流浏览器的方法。下面是两个靠谱的实现思路，帮你搞定这个问题：

1. 现代浏览器首选：window.matchMedia('print') #

这是目前最推荐的方案，兼容Chrome、Firefox、Edge、Safari（13.1+）等绝大多数现代浏览器。它通过监听打印媒体查询的状态变化，当浏览器从打印模式切换回普通屏幕模式时，就意味着打印操作已经结束（不管是用户完成打印还是取消了操作）。

实现步骤： #

• 先把原本为空的输入框单独存起来，同时给这些输入框标记一个自定义标识，方便后续识别哪些是我们临时修改的
• 监听print媒体查询的状态变化，触发时恢复输入框的空值

完整代码示例： #

// 筛选并保存所有原本为空的输入框
const emptyInputs = $('#checkRequestDetails').find('input').filter(function() {
  return $(this).val() === '';
});

// 给空输入框插入0，并标记这是临时填充的值
emptyInputs.val('0').data('temp-zero', true);

// 创建打印媒体查询监听
const printQuery = window.matchMedia('print');

function handlePrintStatusChange(e) {
  // 当媒体查询从print切换回screen时，执行恢复操作
  if (!e.matches) {
    $('input[data-temp-zero="true"]').val('').removeData('temp-zero');
    // 移除监听，避免重复触发
    printQuery.removeEventListener('change', handlePrintStatusChange);
  }
}

printQuery.addEventListener('change', handlePrintStatusChange);

2. 旧版IE兼容：onbeforeprint & onafterprint 事件 #

如果需要兼容IE9及以上版本，可以用浏览器原生的onbeforeprint和onafterprint事件。其中onafterprint会在打印对话框关闭后触发，无论用户是选择打印还是取消操作。

兼容代码补充： #

// 针对旧版IE的兼容处理
if (typeof window.onbeforeprint === 'function' && typeof window.onafterprint === 'function') {
  window.onafterprint = function() {
    $('input[data-temp-zero="true"]').val('').removeData('temp-zero');
    // 重置事件绑定，避免多次触发
    window.onafterprint = null;
  };
}

关键注意事项 #

• 一定要标记临时修改的输入框：别事后用val() === '0'来判断，否则会误清空用户本来输入的0
• 测试全场景：要覆盖打印完成、取消打印、关闭打印预览等所有情况，确保恢复逻辑都能触发
• jQuery版本兼容：如果你的jQuery版本较旧，data()方法可能有差异，可以用attr('data-temp-zero', 'true')替代

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