Firefox中打印内容修改失效求助（Chrome可正常运行）

DevOps 小满

2026-7-23

解决Firefox中beforeprint/afterprint事件失效的问题

问题根源

Firefox在打开打印预览时会创建当前页面文档的独立克隆副本，原页面绑定在window上的beforeprint/afterprint事件监听不会被同步到这个克隆文档中，导致事件完全无法触发，这就是你的Hook在Firefox中失效的核心原因。

兼容方案：使用媒体查询监听打印状态

放弃依赖beforeprint/afterprint事件，改用window.matchMedia监听print媒体查询的状态变化，这个方案在Chrome、Firefox、Safari等主流浏览器中都能稳定工作。

修改后的usePrint Hook代码

import { useState, useEffect } from 'react';

export function usePrint() {
  const [isPrinting, setIsPrinting] = useState(false);

  useEffect(() => {
    // 创建打印媒体查询实例
    const printMedia = window.matchMedia('print');

    // 处理媒体查询状态变化
    const handlePrintStateChange = (event) => {
      setIsPrinting(event.matches);
    };

    // 添加监听
    printMedia.addListener(handlePrintStateChange);
    // 初始检查当前是否处于打印状态
    setIsPrinting(printMedia.matches);

    // 组件卸载时移除监听
    return () => {
      printMedia.removeListener(handlePrintStateChange);
    };
  }, []);

  return isPrinting;
}

方案说明

matchMedia('print')会创建一个媒体查询对象，当浏览器进入/退出打印预览状态时，该对象的matches属性会同步变化，并触发change事件
这个监听是和当前文档的媒体状态绑定的，不受Firefox打印预览克隆文档的影响，能在所有浏览器中可靠触发状态更新
初始检查printMedia.matches可以处理页面加载时就处于打印状态的极端场景