Firefox中JavaScript打印事件及媒体查询异常问题求助

一、beforeprint/afterprint事件的浏览器差异与处理 #

你遇到的是浏览器对打印事件的实现差异，并非操作错误。Chromium与Firefox的触发逻辑存在明显区别：

• Chromium内核浏览器：打开打印预览触发beforeprint，关闭预览触发afterprint
• Firefox：打开打印预览时会先后触发beforeprint和afterprint，关闭预览时无任何事件触发

Firefox的行为源于自身早期对打印事件的实现逻辑——它将打印预览的渲染完成视为“打印后”状态，因此会在预览打开后立即触发afterprint，而非等待预览关闭。

解决方案：通过时间差区分场景 #

利用事件触发的时间差，判断当前是Firefox的预览打开场景，还是实际打印/Chromium的关闭预览场景：

let beforePrintTriggerTime = 0;
// 设定阈值，区分正常打印和Firefox预览的连续触发
const PRINT_EVENT_THRESHOLD = 100;

window.addEventListener("beforeprint", () => {
  beforePrintTriggerTime = Date.now();
  calendarBeforePrint(calendarVariableName);
});

window.addEventListener("afterprint", () => {
  const timeElapsed = Date.now() - beforePrintTriggerTime;
  if (timeElapsed < PRINT_EVENT_THRESHOLD) {
    // Firefox打开打印预览时的连续触发，可标记预览状态
    console.log("进入Firefox打印预览");
  } else {
    // 实际打印完成或Chromium关闭预览，执行后续逻辑
    console.log("打印完成/退出预览");
  }
});

二、打印方向变化的捕获方案（Firefox兼容） #

你使用的matchMedia('print')在Firefox中不生效，原因是Firefox仅在实际打印作业启动时才会将print媒体查询的matches设为true，而非打开打印预览时。

解决方案：结合方向媒体查询与打印事件监听 #

通过监听打印状态与屏幕方向的变化，结合判断当前是否处于打印相关场景：

if (window.matchMedia) {
  const printQuery = window.matchMedia('print');
  const portraitQuery = window.matchMedia('(orientation: portrait)');
  const landscapeQuery = window.matchMedia('(orientation: landscape)');

  const handlePrintOrientationChange = () => {
    // 仅在打印相关状态下执行逻辑
    if (printQuery.matches || document.querySelector('#print-preview')) {
      calendarBeforePrint(calendar1);
    }
  };

  // 使用标准的addEventListener替代已弃用的addListener
  printQuery.addEventListener('change', handlePrintOrientationChange);
  portraitQuery.addEventListener('change', handlePrintOrientationChange);
  landscapeQuery.addEventListener('change', handlePrintOrientationChange);
}

补充：CSS处理方案 #

如你所述，部分场景可直接用CSS媒体查询处理打印方向的样式调整，这在Firefox中完全有效：

@media print and (orientation: portrait) {
  /* 纵向打印样式 */
  .calendar {
    width: 100%;
  }
}

@media print and (orientation: landscape) {
  /* 横向打印样式 */
  .calendar {
    width: 140%;
  }
}

内容的提问来源于stack exchange，提问作者Andreas L.