Reactjs 如何在 React.js 中提取 PDF 的内容

要在React.js应用程序中提取PDF内容，可以使用pdfjs-dist库，它提供了处理PDF文件的功能.下面是一个如何实现这一点的例子:

1. 安装所需的程序包: 首先使用NPM或Yarn 安装pdfjs-dist包:

   npm install pdfjs-dist
   

2. 在组件中导入所需的模块:

   import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
   import pdfjs from 'pdfjs-dist';
   

3. 配置PDF.js库: 在加载PDF文件之前，您需要通过设置指向Worker文件的正确路径来配置pdfjs库.您可以在要处理PDF文件的组件中执行此操作:

   pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
   

4. 从PDF加载和提取内容: 在您的组件中，您可以加载PDF文件并提取其内容.下面是一个使用函数组件和挂钩的示例:

   import React, { useState } from 'react';
   
   const PdfExtractor = () => {
     const [numPages, setNumPages] = useState(null);
     const [pdfText, setPdfText] = useState('');
   
     const onDocumentLoadSuccess = ({ numPages }) => {
       setNumPages(numPages);
   
       // Extract text from each page
       const textPromises = [];
       for (let i = 1; i <= numPages; i++) {
         textPromises.push(
           pdfjs.getDocument({ url: 'path/to/pdf/file.pdf' })
             .then((pdf) => pdf.getPage(i))
             .then((page) => page.getTextContent())
             .then((textContent) => {
               const pageText = textContent.items.map((item) => item.str).join(' ');
               return pageText;
             })
         );
       }
   
       Promise.all(textPromises)
         .then((pageTexts) => {
           const extractedText = pageTexts.join(' ');
           setPdfText(extractedText);
         })
         .catch((error) => console.error('Failed to extract PDF text:', error));
     };
   
     return (
       <div>
         <Document
           file="path/to/pdf/file.pdf"
           onLoadSuccess={onDocumentLoadSuccess}
         >
           {Array.from(new Array(numPages), (el, index) => (
             <Page key={`page_${index + 1}`} pageNumber={index + 1} />
           ))}
         </Document>
         <div>{pdfText}</div>
       </div>
     );
   };
   
   export default PdfExtractor;
   

   在上面的示例中，用您的PDF文件的实际路径或URL替换'path/to/pdf/file.pdf'.

   当成功加载PDF时，将调用onDocumentLoadSuccess函数.它从PDF的每一页提取文本内容并将它们连接在一起.

   提取的文本存储在pdfText状态变量中，该变量可以在组件中呈现或根据需要使用.

   react-pdf中的Document组件用于呈现PDF页面，Page组件表示每个单独的页面.

通过遵循以下步骤，您可以使用pdfjs-dist库在React.js应用程序中提取PDF内容.

最新情况:

要允许使用<input>组件 Select 文件，您可以执行以下操作:

import { useState } from 'react';
import { PDFDocument } from 'pdfjs-dist';

function YourComponent() {
  const [pdfContent, setPdfContent] = useState('');

  const handleFileChange = async (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = async (e) => {
      const contents = e.target.result;
      const pdf = await PDFDocument.load(contents);
      const pages = pdf.getPages();
      let extractedText = '';

      for (const page of pages) {
        const textContent = await page.getTextContent();
        const pageText = textContent.items.map((item) => item.str).join(' ');
        extractedText += pageText;
      }

      setPdfContent(extractedText);
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <div>{pdfContent}</div>
    </div>
  );
}

export default YourComponent;