如何在React.js中无需后端提取本地PDF文件内容？

• 优先选择pdf.js：这是Mozilla官方维护的纯前端PDF处理库，完全适配浏览器环境，不需要后端支持，能直接通过浏览器的File API读取本地PDF并提取文本。

实现步骤 #

1. 安装依赖

npm install pdfjs-dist
# 或
yarn add pdfjs-dist

2. 编写React组件实现提取逻辑

import React, { useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
// 引入工作线程文件，确保pdf.js在浏览器正常运行
import 'pdfjs-dist/build/pdf.worker.entry';

const PdfTextExtractor = () => {
  const [extractedText, setExtractedText] = useState('');

  const handleFileSelect = async (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    // 将本地文件转为ArrayBuffer供pdf.js解析
    const fileBuffer = await selectedFile.arrayBuffer();
    
    // 加载PDF文档
    const pdfDoc = await pdfjsLib.getDocument({ data: fileBuffer }).promise;
    
    let fullText = '';
    // 遍历所有页面提取文本
    for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
      const page = await pdfDoc.getPage(pageNum);
      const textContent = await page.getTextContent();
      // 拼接当前页的文本内容
      fullText += textContent.items.map(item => item.str).join(' ') + '\n\n';
    }
    
    setExtractedText(fullText);
  };

  return (
    <div className="pdf-extractor">
      <input type="file" accept=".pdf" onChange={handleFileSelect} />
      {extractedText && (
        <div className="text-result">
          <h3>提取结果：</h3>
          <pre>{extractedText}</pre>
        </div>
      )}
    </div>
  );
};

export default PdfTextExtractor;

注意事项 #

• 若PDF是扫描件（图片格式），pdf.js无法直接提取文本，需要搭配OCR工具（如tesseract.js）进行图像转文本处理
• 部分Node.js环境的PDF解析库依赖fs等Node专属API，无法在浏览器运行，所以必须选择像pdf.js这种专为浏览器设计的库
• 加密PDF需要先解密才能提取内容，pdf.js支持部分加密格式的解密处理

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