在React项目中同时使用react-pdf与pdf.js的策略与挑战

// 为直接使用的pdfjs-dist设置worker
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

// 在react-pdf组件中为react-pdf设置worker
import { Document, Page, pdfjs } from 'react-pdf';
import reactPdfWorker from "react-pdf/node_modules/pdfjs-dist/build/pdf.worker.entry"; // 尝试从react-pdf的依赖中导入
pdfjs.GlobalWorkerOptions.workerSrc = reactPdfWorker; // 这会覆盖之前的设置

import React from 'react';
import { Document, Page } from 'react-pdf';
// 关键：直接从 'pdfjs-dist' 导入 pdfjs 对象
// 而不是从 'react-pdf' 导入 { pdfjs }
import * as pdfjs from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';

// 统一设置 pdf.js 的 workerSrc
// 这段代码应在任何 pdf.js 或 react-pdf 渲染/解析操作之前执行
// 建议放在组件文件顶部或应用的入口文件/共享配置模块中
if (pdfjs.GlobalWorkerOptions.workerSrc !== pdfjsWorker) {
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
  console.log('pdf.js workerSrc 已统一设置为:', pdfjsWorker);
}


// 示例：使用 react-pdf 显示 PDF 文档
function PdfViewer({ pdfUrl }) {
  const [numPages, setNumPages] = React.useState(null);
  const [pageNumber, setPageNumber] = React.useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <h2>使用 react-pdf 显示文档</h2>
      <Document
        file={pdfUrl}
        onLoadSuccess={onDocumentLoadSuccess}
        // 其他 Document 属性...
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
      <button onClick={() => setPageNumber(prev => Math.max(1, prev - 1))} disabled={pageNumber <= 1}>
        上一页
      </button>
      <button onClick={() => setPageNumber(prev => Math.min(numPages, prev + 1))} disabled={pageNumber >= numPages}>
        下一页
      </button>
    </div>
  );
}

// 示例：直接使用 pdfjs-dist 解析 PDF 信息
async function getPdfInfo(pdfUrl) {
  try {
    // 这里的 pdfjs 对象已经通过上面的 GlobalWorkerOptions 配置了 workerSrc
    const loadingTask = pdfjs.getDocument(pdfUrl);
    const pdf = await loadingTask.promise;
    console.log(`直接使用 pdfjs-dist: PDF 文档共有 ${pdf.numPages} 页`);
    const metadata = await pdf.getMetadata();
    console.log('PDF 元数据:', metadata);
    return { numPages: pdf.numPages, metadata };
  } catch (error) {
    console.error('直接使用 pdfjs-dist 解析 PDF 失败:', error);
    return null;
  }
}

// 假设在你的主应用组件中调用
function App() {
  const samplePdfUrl = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf';

  React.useEffect(() => {
    getPdfInfo(samplePdfUrl);
  }, []);

  return (
    <div>
      <h1>PDF 功能演示</h1>
      <PdfViewer pdfUrl={samplePdfUrl} />
    </div>
  );
}

export default App;