React项目中基于react-pdf实现PDF放大镜效果的方案咨询

可用第三方包 #

• react-magnifier：轻量放大镜组件，直接嵌套在react-pdf的Page组件外层即可使用，支持自定义放大倍数、放大镜尺寸，适配canvas渲染的PDF内容
• react-image-magnify：支持canvas内容识别，可直接将react-pdf渲染出的页面节点作为目标元素传入，支持跟随鼠标、点击触发两种放大镜模式

手动实现方案（无额外依赖） #

核心逻辑是通过监听鼠标在PDF页面上的坐标，同步渲染放大的局部画布内容：

1. 给react-pdf的Page组件绑定onMouseMove、onMouseEnter、onMouseLeave事件，获取鼠标在页面内的相对坐标
2. 新增一个固定尺寸的放大镜DOM节点，默认隐藏，鼠标进入PDF区域时显示，跟随鼠标坐标移动
3. 调用react-pdf页面渲染的canvas元素的getContext('2d')接口，使用drawImage方法将鼠标对应位置的局部内容放大后绘制到放大镜的canvas节点上

示例核心代码片段：

import { useState, useRef } from 'react';
import { Document, Page } from 'react-pdf';

const PdfMagnifier = () => {
  const [zoomLevel] = useState(2); // 自定义放大倍数
  const [magnifierPos, setMagnifierPos] = useState({ x: 0, y: 0, show: false });
  const pageRef = useRef(null);
  const magnifierRef = useRef(null);

  const handleMouseMove = (e) => {
    if (!pageRef.current) return;
    const pageRect = pageRef.current.getBoundingClientRect();
    const x = e.clientX - pageRect.left;
    const y = e.clientY - pageRect.top;
    setMagnifierPos({ x, y, show: true });

    // 绘制放大内容
    const pageCanvas = pageRef.current.querySelector('canvas');
    const magnifierCanvas = magnifierRef.current.querySelector('canvas');
    if (pageCanvas && magnifierCanvas) {
      const ctx = magnifierCanvas.getContext('2d');
      const magnifierSize = 150; // 自定义放大镜尺寸
      const sourceX = x - (magnifierSize / 2 / zoomLevel);
      const sourceY = y - (magnifierSize / 2 / zoomLevel);
      ctx.drawImage(
        pageCanvas,
        sourceX, sourceY,
        magnifierSize / zoomLevel, magnifierSize / zoomLevel,
        0, 0,
        magnifierSize, magnifierSize
      );
    }
  };

  return (
    <div style={{ position: 'relative' }}>
      <Document file="你的PDF文件路径">
        <Page
          pageNumber={1}
          ref={pageRef}
          onMouseMove={handleMouseMove}
          onMouseLeave={() => setMagnifierPos(prev => ({ ...prev, show: false }))}
        />
      </Document>
      {/* 放大镜节点 */}
      {magnifierPos.show && (
        <div
          ref={magnifierRef}
          style={{
            position: 'absolute',
            left: magnifierPos.x + 10,
            top: magnifierPos.y + 10,
            width: 150,
            height: 150,
            border: '2px solid #000',
            borderRadius: '50%',
            overflow: 'hidden',
            pointerEvents: 'none',
            zIndex: 999
          }}
        >
          <canvas width={150} height={150} />
        </div>
      )}
    </div>
  )
}

注意事项 #

• 如果开启了react-pdf的文本层渲染，需要给放大镜节点设置更高的z-index，避免被文本层遮挡
• 放大倍数建议设置在1.5-3倍区间，过高会出现内容模糊的问题，可配合react-pdf的scale参数预渲染更高清的画布内容，提升放大后的清晰度

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