如何在 React 中通过右键菜单触发 React-to-Print？

浏览器原生右键菜单无法直接添加“打印”选项；唯一可行方案是禁用默认上下文菜单并实现自定义右键菜单，再通过调用 `reacttoprint` 的 `handleprint()` 方法触发打印。

在 Web 开发中，一个常见误解是：可以通过纯前端 JavaScript 向浏览器默认右键菜单（即 context menu）动态添加自定义项（如“打印此表格”）。这是不可能的——现代浏览器出于安全与一致性考虑，严格禁止网页脚本修改系统级上下文菜单。该限制适用于所有标准 Web 应用（非扩展、非桌面封装环境）。

✅ 正确可行的替代方案是：拦截右键事件 → 阻止默认菜单 → 渲染自定义浮动菜单 → 点击“打印”时调用 ReactToPrint 实例方法。

以下是一个完整、健壮的实现示例：

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

const PrintView = () => {
  const tableRef = useRef(null);
  const printRef = useRef(null);
  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);

  // 拦截右键，显示自定义菜单
  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    setContextMenu({ x: e.clientX, y: e.clientY });
  };

  // 隐藏菜单（点击空白处或 ESC）
  useEffect(() => {
    const handleClick = () => setContextMenu(null);
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setContextMenu(null);
    };

    document.addEventListener('click', handleClick);
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  const handlePrint = () => {
    if (printRef.current) {
      printRef.current.handlePrint();
      setContextMenu(null); // 隐藏菜单
    }
  };

  const handleAfterPrint = () => {
    window.focus();
  };

  return (
    

      {/* 自定义右键菜单 */}
      {contextMenu && (
        

          
            ?️ 打印表格
          
          

           setContextMenu(null)}
            style={{
              width: '100%',
              padding: '8px 12px',
              textAlign: 'left',
              border: 'none',
              background: 'transparent',
              cursor: 'pointer',
              fontSize: '14px',
              color: '#666',
            }}
          >
            取消
          
        
      )}

      {/* ReactToPrint 组件（不可见，仅作打印逻辑载体） */}
       tableRef.current}
        ref={printRef}
        onAfterPrint={handleAfterPrint}
      />

      {/* 待打印内容 */}
      

        

          

            
姓名
            
年龄
            
城市
          
        
        

          

            
张三
            
28
            
北京
          
        
      
    
  );
};

export default PrintView;

⚠️ 重要注意事项：

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

下载

• 用户体验权衡：禁用原生右键菜单会移除“复制”、“检查元素”、“另存为图片”等高频功能，务必确保你的自定义菜单提供至少同等基础能力（例如增加“复制文本”选项），否则将显著降低可访问性与用户满意度。
• 移动端兼容性：onContextMenu 在多数移动浏览器中不触发，该方案仅推荐用于桌面端场景；移动端建议保留按钮或手势（如长按）触发打印。
• 可访问性（a11y）：为自定义菜单按钮添加 role="menuitem"、aria-label 及键盘导航支持（如 ArrowUp/Down 切换、Enter 触发），确保屏幕阅读器用户可用。
• 样式隔离：建议使用 CSS Modules 或 styled-components 封装 .custom-context-menu 样式，避免全局污染。

? 进阶提示：若需深度集成系统级打印入口（如 Chrome 右键菜单新增“Print Table”），必须开发浏览器扩展（WebExtension），利用 contextMenus API，并通过 runtime.sendMessage 与页面通信——但这已超出纯 React 应用范畴，属于跨平台增强方案。

总之，用自定义右键菜单触发 React-to-Print 是当前 Web 标准下最实用、兼容性最佳的解法，关键在于设计克制、体验守恒、渐进增强。