pdfjs库使用记录1

import React, { useEffect, useState, useRef } from 'react';

import * as pdfjsLib from 'pdfjs-dist';

// 设置 worker 路径

pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';

const PDFViewer = ({ url }) => {

  const [pdf, setPdf] = useState(null);

  const [currentPage, setCurrentPage] = useState(1);

  const [numPages, setNumPages] = useState(0);

  const [pageRendering, setPageRendering] = useState(false);

  const [loading, setLoading] = useState(true);

  const [error, setError] = useState(null);

  const canvasRef = useRef(null);

  const linkLayerRef = useRef(null);  // 添加链接层的引用

  const pageCache = useRef(new Map());

  const scale = useRef(1);  // 添加scale引用以在不同函数间共享

  // 添加水印函数

  const addWatermark = (canvas, scale) => {

    const ctx = canvas.getContext('2d');

    const devicePixelRatio = window.devicePixelRatio || 1;

    // 保存当前上下文状态

    ctx.save();

    // 设置水印样式

    ctx.globalAlpha = 0.2; // 水印透明度

    ctx.fillStyle = '#000'; // 水印颜色

    // 计算基础字体大小（根据canvas宽度动态调整）

    const baseFontSize = Math.min(canvas.width, canvas.height) * 0.03; // 3% 的画布大小

    const fontSize = baseFontSize * devicePixelRatio;

    ctx.font = `${fontSize}px Arial`;

    // 水印文本

    const text1 = '45380867';

    const text2 = 'Jun Xiao';

    // 计算水印尺寸

    const text1Width = ctx.measureText(text1).width;

    const text2Width = ctx.measureText(text2).width;

    const lineHeight = fontSize * 1.2;

    const watermarkWidth = Math.max(text1Width, text2Width);

    const watermarkHeight = lineHeight * 2;

    // 计算水印网格

    const xGap = watermarkWidth * 2.5; // 水印之间的横向间距

    const yGap = watermarkHeight * 2.5; // 水印之间的纵向间距

    // 旋转角度（25度）

    const angle = -25 * Math.PI / 180;

    // 绘制水印网格

    for (let y = -yGap; y < canvas.height + yGap; y += yGap) {

      for (let x = -xGap; x < canvas.width + xGap; x += xGap) {

        ctx.save();

        // 移动到水印位置并旋转

        ctx.translate(x, y);

        ctx.rotate(angle);

        // 绘制两行文本

        ctx.fillText(text1, -text1Width / 2, 0);

        ctx.fillText(text2, -text2Width / 2, lineHeight);

        ctx.restore();

      }

    }

    // 恢复上下文状态

    ctx.restore();

  };

  // 添加处理链接的函数

  const setupLinkLayer = (page, viewport) => {

    const linkLayer = linkLayerRef.current;

    if (!linkLayer) return;

    // 清除旧的链接

    while (linkLayer.firstChild) {

      linkLayer.removeChild(linkLayer.firstChild);

    }

    // 获取页面的注解（包括链接）

    page.getAnnotations().then(annotations => {

      annotations.forEach(annotation => {

        if (annotation.subtype === 'Link' && annotation.url) {

          // 创建链接元素

          const link = document.createElement('a');

          const bounds = viewport.convertToViewportRectangle(annotation.rect);

          // 设置链接样式

          link.href = annotation.url;

          link.target = '_blank';  // 在新标签页中打开

          link.style.position = 'absolute';

          link.style.left = `${Math.min(bounds[0], bounds[2])}px`;

          link.style.top = `${Math.min(bounds[1], bounds[3])}px`;

          link.style.width = `${Math.abs(bounds[2] - bounds[0])}px`;

          link.style.height = `${Math.abs(bounds[3] - bounds[1])}px`;

          link.style.cursor = 'pointer';

          // 添加到链接层

          linkLayer.appendChild(link);

        }

      });

    });

  };

  // 初始化 PDF

  useEffect(() => {

    const loadPDF = async () => {

      if (!url) return;

      try {

        setLoading(true);

        setError(null);

        // 创建加载任务

        const loadingTask = pdfjsLib.getDocument(url);

        const pdfDoc = await loadingTask.promise;

        setPdf(pdfDoc);

        setNumPages(pdfDoc.numPages);

      } catch (error) {

        console.error('Error loading PDF:', error);

        setError('PDF加载失败，请稍后重试');

      } finally {

        setLoading(false);

      }

    };

    loadPDF();

    return () => {

      // 清理缓存的页面

      pageCache.current.clear();

      if (pdf) {

        pdf.destroy();

      }

    };

  }, [url]);

  // 渲染页面

  const renderPage = async (pageNum) => {

    if (pageRendering || !pdf) return;

    setPageRendering(true);

    try {

      // 检查缓存

      if (!pageCache.current.has(pageNum)) {

        const page = await pdf.getPage(pageNum);

        pageCache.current.set(pageNum, page);

      }

      const page = pageCache.current.get(pageNum);

      const canvas = canvasRef.current;

      const ctx = canvas.getContext('2d');

      // 计算适合屏幕的缩放比例

      const viewport = page.getViewport({ scale: 1 });

      const devicePixelRatio = window.devicePixelRatio || 1;

      const containerWidth = canvas.parentElement.clientWidth;

      const scale = (containerWidth / viewport.width) * devicePixelRatio;

      // 设置canvas尺寸

      const scaledViewport = page.getViewport({ scale });

      canvas.width = scaledViewport.width;

      canvas.height = scaledViewport.height;

      canvas.style.width = `${containerWidth}px`;

      canvas.style.height = `${scaledViewport.height / devicePixelRatio}px`;

      // 设置链接层尺寸和位置

      if (linkLayerRef.current) {

        linkLayerRef.current.style.width = `${containerWidth}px`;

        linkLayerRef.current.style.height = `${scaledViewport.height / devicePixelRatio}px`;

      }

      // 渲染PDF页面

      const renderContext = {

        canvasContext: ctx,

        viewport: scaledViewport,

        enableWebGL: true,

      };

      await page.render(renderContext).promise;

      // 设置链接

      setupLinkLayer(page, scaledViewport);

      // 在PDF页面渲染完成后添加水印

      addWatermark(canvas, scale);

    } catch (error) {

      console.error('Error rendering page:', error);

      setError('页面渲染失败，请刷新重试');

    } finally {

      setPageRendering(false);

    }

  };

  // 页面变化时重新渲染

  useEffect(() => {

    renderPage(currentPage);

  }, [currentPage, pdf]);

  // 内存管理：清理不可见页面的缓存

  useEffect(() => {

    const cleanupCache = () => {

      if (pageCache.current.size > 3) { // 只保留当前页面附近的几页

        const pagesToKeep = new Set([

          currentPage,

          currentPage - 1,

          currentPage + 1

        ]);

        pageCache.current.forEach((page, pageNum) => {

          if (!pagesToKeep.has(pageNum)) {

            // 确保在删除缓存前释放页面资源

            page.cleanup();

            pageCache.current.delete(pageNum);

          }

        });

      }

    };

    cleanupCache();

  }, [currentPage]);

  // 处理窗口大小变化

  useEffect(() => {

    const handleResize = () => {

      renderPage(currentPage);

    };

    window.addEventListener('resize', handleResize);

    return () => {

      window.removeEventListener('resize', handleResize);

    };

  }, [currentPage]);

  if (loading) {

    return (

      <div className="loading">

        <div className="loading-text">PDF文件加载中...</div>

        <div className="loading-spinner"></div>

      </div>

    );

  }

  if (error) {

    return (

      <div className="error">

        <div className="error-message">{error}</div>

        <button onClick={() => window.location.reload()} className="retry-button">

          重试

        </button>

      </div>

    );

  }

  return (

    <div className="pdf-viewer">

      <div className="pdf-controls">

        <button

          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}

          disabled={currentPage <= 1 || pageRendering}

          className="control-button"

        >

          上一页

        </button>

        <span className="page-info">{`第 ${currentPage} 页，共 ${numPages} 页`}</span>

        <button

          onClick={() => setCurrentPage(prev => Math.min(prev + 1, numPages))}

          disabled={currentPage >= numPages || pageRendering}

          className="control-button"

        >

          下一页

        </button>

      </div>

      <div className="pdf-container">

        <div className="canvas-container" style={{ position: 'relative' }}>

          <canvas ref={canvasRef} className="pdf-canvas" />

          <div

            ref={linkLayerRef}

            style={{

              position: 'absolute',

              top: 0,

              left: 0,

              right: 0,

              bottom: 0,

              pointerEvents: 'none'  // 允许点击穿透到链接

            }}

            className="link-layer"

          />

        </div>

      </div>

    </div>

  );

};

export default PDFViewer;