如何通过右键上下文菜单的打印选项触发React-to-Print功能？

要实现右键菜单触发打印，你需要自定义上下文菜单（浏览器默认右键菜单无法直接修改），具体实现步骤如下：

1. 拦截默认右键菜单并记录点击位置 #

先阻止浏览器默认右键菜单弹出，同时保存点击坐标用于定位自定义菜单：

const [menuVisible, setMenuVisible] = useState(false);
const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

const handleMouseRightClick = (e) => {
  e.preventDefault(); // 阻止默认右键菜单弹出
  setMenuPosition({ x: e.clientX, y: e.clientY });
  setMenuVisible(true);
};

2. 添加全局点击关闭菜单逻辑 #

监听页面点击事件，点击菜单外区域时自动关闭自定义菜单：

useEffect(() => {
  const handleClickOutside = () => {
    if (menuVisible) setMenuVisible(false);
  };

  document.addEventListener('click', handleClickOutside);
  return () => document.removeEventListener('click', handleClickOutside);
}, [menuVisible]);

3. 渲染自定义右键菜单并绑定打印触发逻辑 #

在组件中添加自定义菜单，点击打印选项时直接调用React-to-Print的打印方法：

{menuVisible && (
  <div
    style={{
      position: 'fixed',
      top: menuPosition.y,
      left: menuPosition.x,
      background: '#fff',
      border: '1px solid #ccc',
      borderRadius: '4px',
      padding: '8px 0',
      minWidth: '120px',
      boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
      zIndex: 9999
    }}
  >
    <div
      style={{ padding: '8px 16px', cursor: 'pointer' }}
      onClick={() => {
        printRef.current?.handlePrint();
        setMenuVisible(false);
      }}
      onMouseEnter={(e) => e.target.style.background = '#f5f5f5'}
      onMouseLeave={(e) => e.target.style.background = '#fff'}
    >
      打印表格
    </div>
  </div>
)}

完整修改后的组件代码 #

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

const PrintView = () => {
  const tableRef = useRef(null);
  const printRef = useRef();
  const [menuVisible, setMenuVisible] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleKeyDown = (event) => {
      if ((event.ctrlKey || event.metaKey) && event.key === 'p') {
        event.preventDefault();
        printRef.current?.handlePrint();
        window.focus();
      }
    };

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

  useEffect(() => {
    const handleClickOutside = () => {
      if (menuVisible) setMenuVisible(false);
    };

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
  }, [menuVisible]);

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

  const handleMouseRightClick = (e) => {
    e.preventDefault();
    setMenuPosition({ x: e.clientX, y: e.clientY });
    setMenuVisible(true);
  };

  return (
    <div onContextMenu={handleMouseRightClick}>
      <ReactToPrint
        content={() => tableRef.current}
        ref={printRef}
        onAfterPrint={handleAfterPrint}
      />
      <table ref={tableRef} border="1">
        <thead>
          <tr>
            <th>列1</th>
            <th>列2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>数据1</td>
            <td>数据2</td>
          </tr>
        </tbody>
      </table>

      {menuVisible && (
        <div
          style={{
            position: 'fixed',
            top: menuPosition.y,
            left: menuPosition.x,
            backgroundColor: '#ffffff',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            padding: '8px 0',
            minWidth: '140px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
            zIndex: 1000,
            cursor: 'default'
          }}
        >
          <div
            style={{ padding: '8px 16px', cursor: 'pointer' }}
            onClick={() => {
              printRef.current?.handlePrint();
              setMenuVisible(false);
            }}
            onMouseEnter={(e) => e.target.style.backgroundColor = '#f5f5f5'}
            onMouseLeave={(e) => e.target.style.backgroundColor = '#ffffff'}
          >
            打印表格
          </div>
        </div>
      )}
    </div>
  );
};

export default PrintView;

关键说明 #

• 自定义菜单通过position: fixed精准定位到右键点击坐标
• 点击菜单外区域自动关闭菜单，符合用户操作习惯
• 打印触发逻辑和按钮点击完全一致，复用React-to-Print的现有能力
• 可根据需求扩展菜单样式（如添加分隔线、更多操作选项）

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