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

要在 React.js 应用程序中提取 PDF 的内容，您可以使用该库，它提供了处理 PDF 文件的功能。下面是如何实现此目的的示例：pdfjs-dist

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 文件之前，您需要通过设置工作文件的正确路径来配置库。您可以在将要处理 PDF 文件的组件中执行此操作：pdfjs

   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 成功加载时，将调用该函数。它从 PDF 的每一页中提取文本内容并将它们连接在一起。onDocumentLoadSuccess

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

   组件 from 用于呈现 PDF 页面，该组件表示每个单独的页面。Documentreact-pdfPage

通过执行这些步骤，您可以使用库在 React.js 应用程序中提取 PDF 的内容。pdfjs-dist

更新：

要允许使用该组件选择文件，您可以执行以下操作：<input>

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;