React中react-to-print的Ctrl+P事件仅首次生效问题排查

问题根源 #

组件内部的键盘事件监听可能在react-to-print的打印流程（如创建临时iframe、DOM操作）中丢失，或事件冒泡被干扰，导致后续无法捕获Ctrl+P事件，触发浏览器默认全页打印。

解决方案 #

改用全局捕获模式的键盘事件监听，确保事件在浏览器默认处理前被拦截，同时配合稳定的打印回调函数：

import React, { useRef, useEffect, useCallback } from 'react';
import ReactToPrint from 'react-to-print';

// 可打印组件（使用forwardRef暴露引用）
const PrintableContent = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h2>指定打印内容</h2>
      <p>这是需要打印的特定组件内容</p>
    </div>
  );
});

const App = () => {
  const printRef = useRef(null);

  // 稳定的打印触发函数，避免不必要的重渲染
  const triggerPrint = useCallback(() => {
    printRef.current?.handlePrint();
  }, [printRef]);

  // 全局键盘事件处理逻辑
  const handleGlobalKeyDown = (e) => {
    // 兼容Windows（Ctrl+P）和Mac（Cmd+P）
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'p') {
      e.preventDefault(); // 阻止浏览器默认打印行为
      triggerPrint();
    }
  };

  useEffect(() => {
    // 添加全局捕获模式监听，确保优先拦截事件
    window.addEventListener('keydown', handleGlobalKeyDown, true);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('keydown', handleGlobalKeyDown, true);
    };
  }, [triggerPrint]);

  return (
    <div>
      <h1>主应用内容</h1>
      <ReactToPrint
        trigger={() => <button>手动打印</button>}
        content={() => printRef.current}
        ref={printRef}
      />
      <PrintableContent ref={printRef} />
    </div>
  );
};

export default App;

关键要点 #

1. 全局捕获监听：使用window.addEventListener并传入第三个参数true启用捕获模式，事件会在冒泡到浏览器默认处理逻辑前被拦截，避免react-to-print的DOM操作干扰监听。
2. 稳定的打印回调：用useCallback包裹triggerPrint，确保函数引用稳定，避免useEffect频繁解绑/重新绑定事件。
3. 正确清理监听：在useEffect的返回函数中移除事件监听，防止内存泄漏。
4. 跨平台兼容：同时检测ctrlKey（Windows）和metaKey（Mac），确保快捷键在不同系统上生效。

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