如何使用react-pdf提取PDF页面内容并自行解析？求技术指导

核心说明 #

react-pdf本质是对Mozilla PDF.js的React封装，它不仅能渲染PDF，也能通过底层API提取PDF的文本内容，满足自定义解析需求。

实现步骤 #

1. 安装依赖
   执行安装命令：

   npm install react-pdf
   

2. 加载并提取文本
   通过PDFDocument类加载PDF，遍历页面获取文本内容：

   import { PDFDocument, pdfjs } from 'react-pdf';
   
   // 配置PDF.js的Worker路径，避免运行报错
   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
   
   async function extractPDFContent(pdfSource) {
     // 加载PDF，支持URL、ArrayBuffer等格式
     const pdfDoc = await PDFDocument.load(pdfSource);
     const pageCount = pdfDoc.numPages;
     const pageContents = [];
   
     // 遍历每一页提取文本
     for (let pageNum = 1; pageNum <= pageCount; pageNum++) {
       const page = await pdfDoc.getPage(pageNum);
       const textData = await page.getTextContent();
       // 拼接文本块，或保留原始结构用于精细解析
       const pageText = textData.items.map(item => item.str).join(' ');
       pageContents.push({
         pageNumber: pageNum,
         text: pageText,
         rawTextItems: textData.items // 包含位置、字体等元数据，按需使用
       });
     }
   
     return pageContents;
   }
   
   // 调用示例：传入PDF路径或ArrayBuffer
   extractPDFContent('/assets/sample.pdf').then(content => {
     // 此处可对提取的content进行自定义解析
     console.log('提取的PDF内容:', content);
   });
   

工作原理 #

react-pdf依赖PDF.js处理PDF的底层解析：

• PDFDocument.load()触发PDF.js加载并解析PDF文件，将其转换为可操作的文档对象
• getPage()获取单页的解析实例，getTextContent()返回该页的结构化文本数据，包含每个文本块的内容、位置、字体大小等信息
• 你可以直接拼接文本得到整页内容，也可以利用rawTextItems中的元数据实现更复杂的解析（比如识别表格、标题等排版结构）

注意事项 #

• 若PDF来自外部域名，需确保目标服务器配置了CORS允许跨域访问
• 处理大体积PDF时，建议分页加载或使用Web Worker避免阻塞主线程
• 加密或扫描版PDF无法直接提取文本（扫描版本质是图片，需搭配OCR工具）

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