前端 PDF 渲染方案：基于 pdf.js 的两种实现路径

2. 服务端方式

通过 axios 获取文件的 arraybuffer，转换为 blob URL 后传给 viewer.html。

import React, { useState } from 'react';
import axios from 'axios';

const ViewPDF: React.FC = () => {
  const [pdfUrl, setPdfUrl] = useState<string>('');
  const pdfServerUrl = '/pdfjs-2.5.207-es5-dist/web/viewer.html';

  const getPDFViewUrl = (fileName: string) => {
    axios({
      method: 'get',
      url: fileName,
      responseType: 'arraybuffer',
    }).then((response) => {
      const blob = new Blob([response.data], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      setPdfUrl(`${pdfServerUrl}?file=${blobUrl}`);
    });
  };

  return (
    <>
      <h1>PDF 预览</h1>
      <iframe src={pdfUrl} />
    </>
  );
};

export default ViewPDF;

外部搜索条件触发 pdf.js 搜索逻辑

如果需要实现外部搜索框并高亮匹配内容，可以通过 postMessage 与 iframe 通信。

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

const ViewPDFWithSearch: React.FC = () => {
  const pdfUrl = '/A.pdf';
  const pdfServerUrl = '/pdfjs-2.5.207-es5-dist/web/viewer.html';
  const url = `${pdfServerUrl}?file=${pdfUrl}`;
  let pdfContentWindow: any = null;

  const getPdfContent = () => {
    const pdfFrame = document.getElementById('pdfIframe');
    if (!pdfFrame) return;
    pdfContentWindow = pdfFrame.contentWindow;
  };

  const onSearchForOut = (searchText: string) => {
    if (!pdfContentWindow) return;
    // 发送搜索文本
    pdfContentWindow.postMessage(searchText, '*');
    
    // 监听消息并执行高亮
    const handler = (e: any) => {
      if (pdfContentWindow.PDFViewerApplication?.findBar) {
        pdfContentWindow.PDFViewerApplication.findBar.findField.value = e.data;
        pdfContentWindow.PDFViewerApplication.findBar.highlightAll.checked = true;
        pdfContentWindow.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');
        pdfContentWindow.PDFViewerApplication.findBar.dispatchEvent('again', false);
      }
    };
    window.addEventListener('message', handler, false);
  };

  useEffect(() => {
    getPdfContent();
    setTimeout(() => {
      onSearchForOut('阳区 CBD 核心区');
    }, 3000);
    return () => {
      window.removeEventListener('message', () => {});
    };
  }, []);

  return (
    <div>
      <h1>PDF 搜索</h1>
      <iframe id="pdfIframe" src={url} style={{ width: '100%', height: '600px' }} />
    </div>
  );
};

export default ViewPDFWithSearch;

把 pdf 渲染为 canvas 实现预览

这种方式灵活性更高，适合需要深度定制交互的场景。

安装

npm install pdfjs-dist --save

功能实现

1. 基础预览

引入 pdfjs-dist，配置 worker 源，加载 PDF 并逐页渲染到 Canvas。

import React, { useState, useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist';

const pdfUrl = '/zyk.pdf';
const workerUrl = `/pdf.worker.min.js`;

pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;

const ViewPdf: React.FC<{ height: string }> = ({ height }) => {
  const pdfContainerRef = useRef<HTMLDivElement>(null);
  const [pagesList, setPagesList] = useState<any[]>([]);
  const scale = 2; // 缩放比例

  const renderPage = async (page: any, pageNumber: number) => {
    const viewport = page.getViewport({ scale });
    const pageContentDom = document.createElement('div');
    pageContentDom.id = `pdfPage-content-${pageNumber}`;
    pageContentDom.style.width = `${viewport.width}px`;
    pageContentDom.style.height = `${viewport.height}px`;
    pageContentDom.style.position = 'relative';

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.id = `pdfPage-${pageNumber}`;
    canvas.width = viewport.width;
    canvas.height = viewport.height;
    canvas.style.border = '1px solid black';
    
    pageContentDom.appendChild(canvas);
    pdfContainerRef.current?.appendChild(pageContentDom);

    await page.render({ canvasContext: context, viewport }).promise;
  };

  const loadPdf = async (url: string) => {
    const pdf = await pdfjsLib.getDocument(url).promise;
    const pages: any[] = [];
    for (let i = 1; i <= pdf.numPages; i++) {
      const page = await pdf.getPage(i);
      const textContent = await page.getTextContent();
      pages.push({ page, textContent });
    }
    setPagesList(pages);
    pages.forEach(({ page }: any, index: number) => renderPage(page, index));
  };

  useEffect(() => {
    loadPdf(pdfUrl);
  }, []);

  return (
    <div>
      <h1>PDF 自定义渲染</h1>
      <div style={{ height: height || '500px' }}>
        <div ref={pdfContainerRef} style={{ position: 'relative', height: '100%', overflowY: 'scroll' }} />
      </div>
    </div>
  );
};

export default ViewPdf;

2. 实现文本可选复制

通过 renderTextLayer API 创建文本层，覆盖在 Canvas 之上，即可实现文字选中复制。

// 修改 renderPage 方法
const renderPage = async (page: any, pageNumber: number) => {
  const viewport = page.getViewport({ scale });
  const pageContentDom = document.createElement('div');
  pageContentDom.className = 'pdfViewer';
  pageContentDom.style.width = `${viewport.width}px`;
  pageContentDom.style.height = `${viewport.height}px`;
  pageContentDom.style.position = 'relative';

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.id = `pdfPage-${pageNumber}`;
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  pageContentDom.appendChild(canvas);

  await page.render({ canvasContext: context, viewport }).promise;

  // 添加文本层
  const textLayerDiv = document.createElement('div');
  textLayerDiv.style.width = viewport.width;
  textLayerDiv.style.height = viewport.height;
  textLayerDiv.className = 'textLayer';
  
  const textContent = await page.getTextContent();
  pdfjsLib.renderTextLayer({
    textContentSource: textContent,
    container: textLayerDiv,
    viewport: viewport,
    textDivs: [],
  });
  
  pageContentDom.appendChild(textLayerDiv);
  pdfContainerRef.current?.appendChild(pageContentDom);
};

3. 实现搜索、匹配内容高亮及跳转

这需要手动计算坐标并在 Canvas 上绘制高亮层。注意 pdf.js 的坐标系原点在左下角，而 DOM 通常在左上角，转换时需减去高度。

import React, { useState, useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist';

// ... 初始化代码同上 ...

const ViewPdfWithHighlight: React.FC<{ height: string }> = ({ height }) => {
  const [searchText, setSearchText] = useState('');
  const pdfContainerRef = useRef<HTMLDivElement>(null);
  const [pagesList, setPagesList] = useState<any[]>([]);
  const scale = 2;

  // 创建高亮层 Canvas
  const createHighlightCanvas = (viewport: any, pageNumber: number, parentDom: any) => {
    const highlightCanvas = document.createElement('canvas');
    highlightCanvas.id = `highlightCanvas-${pageNumber}`;
    highlightCanvas.className = 'highlightCanvas';
    highlightCanvas.width = viewport.width;
    highlightCanvas.height = viewport.height;
    highlightCanvas.style.position = 'absolute';
    highlightCanvas.style.top = '0';
    highlightCanvas.style.left = '0';
    highlightCanvas.style.zIndex = '1';
    parentDom.appendChild(highlightCanvas);
  };

  // 滚动到指定页码
  const jumpToPage = (pageIndex: number) => {
    let beforeCanvasHeight = 0;
    for (let i = 0; i < pageIndex; i++) {
      const dom = pdfContainerRef.current?.querySelector(`#pdfPage-content-${i}`);
      if (dom) {
        const h = dom.style.height.replace('px', '');
        beforeCanvasHeight += Number(h);
      }
    }
    pdfContainerRef.current?.scrollTo({ top: beforeCanvasHeight, behavior: 'smooth' });
  };

  // 获取文本块 Y 轴坐标（需转换坐标系）
  const getCurrentTextContentY = (canvas: any, match: any) => {
    const { transform, height } = match.textBlock;
    return canvas.height - (transform[5] + height - 2) * scale;
  };

  // 绘制高亮区域
  const drawHighlights = async (canvas: any, matchesList: any[]) => {
    if (matchesList.length === 0) return;
    const context = canvas.getContext('2d');
    context.fillStyle = 'rgba(255, 255, 0, 0.5)';
    
    matchesList.forEach((match: any) => {
      const { textBlock } = match;
      const { transform, width, height, str } = textBlock;
      const charWidth = width / str.length;
      const lightWidth = (match.textEndIndex - match.textStartIndex) * charWidth;
      const x = transform[4] + match.textStartIndex * charWidth;
      const y = getCurrentTextContentY(canvas, match);
      
      context.fillRect(
        Math.floor(x * scale),
        Math.floor(y),
        Math.ceil(lightWidth * scale),
        Math.ceil(height * scale)
      );
    });
  };

  // 查找所有匹配项（简化逻辑示例）
  const findAllOccurrences = (items: any[], searchStr: string): any[] => {
    const results: any[] = [];
    items.forEach((item, index) => {
      if (item.str.includes(searchStr)) {
        results.push({ blockIndex: index, textStartIndex: item.str.indexOf(searchStr), textEndIndex: item.str.indexOf(searchStr) + searchStr.length, textBlock: item });
      }
    });
    return results;
  };

  const handleSearch = async () => {
    if (!searchText) return;
    
    // 清除旧高亮
    const highlightCanvases = Array.from(pdfContainerRef.current?.querySelectorAll('.highlightCanvas') || []);
    highlightCanvases.forEach((c: any) => c.getContext('2d').clearRect(0, 0, c.width, c.height));

    const newMatches: any[] = [];
    pagesList.forEach(({ textContent }: any, pageIndex: number) => {
      const pageMatches = findAllOccurrences(textContent.items, searchText);
      newMatches.push({ pageIndex, matchList: pageMatches });
    });

    if (newMatches.every(m => m.matchList.length === 0)) {
      alert('未找到匹配项');
      return;
    }

    // 重绘高亮
    newMatches.forEach(({ pageIndex, matchList }: any) => {
      const highlightCanvas = pdfContainerRef.current?.querySelector(`#highlightCanvas-${pageIndex}`);
      if (highlightCanvas && matchList.length > 0) {
        drawHighlights(highlightCanvas, matchList);
      }
    });

    // 跳转到第一处匹配
    const firstMatch = newMatches.find(m => m.matchList.length > 0);
    if (firstMatch) {
      jumpToPage(firstMatch.pageIndex);
    }
  };

  return (
    <div>
      <h1>PDF 搜索与高亮</h1>
      <input type="text" value={searchText} onChange={(e) => setSearchText(e.target.value)} placeholder="输入要搜索的内容" />
      <button onClick={handleSearch}>搜索</button>
      <div style={{ height: height || '500px' }}>
        <div ref={pdfContainerRef} style={{ position: 'relative', height: '100%', overflowY: 'scroll' }} />
      </div>
    </div>
  );
};

export default ViewPdfWithHighlight;

4. 获取 PDF 目录数据结构

使用 getOutline 方法可以提取 PDF 的书签或目录结构。

const getOutlineData = async (url: string) => {
  const pdf = await pdfjsLib.getDocument(url).promise;
  const outline = await pdf.getOutline();
  console.log('目录数据:', outline);
};