当前位置：首页 > React

react项目实现导入pdf

2026-01-27 10:41:55React

在React项目中实现PDF导入功能

使用react-pdf库

安装react-pdf库：

npm install react-pdf

基本使用示例：

import { Document, Page } from 'react-pdf';

function PDFViewer() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

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

  return (
    <div>
      <Document
        file="example.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

实现PDF文件上传

创建文件上传组件：

function PDFUploader() {
  const [file, setFile] = useState(null);

  const onFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <div>
      <input type="file" onChange={onFileChange} accept=".pdf" />
      {file && (
        <Document file={file}>
          <Page pageNumber={1} />
        </Document>
      )}
    </div>
  );
}

使用pdf-lib进行高级操作

安装pdf-lib：

npm install pdf-lib

提取PDF文本内容：

import { PDFDocument } from 'pdf-lib';

async function extractText(pdfBytes) {
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();
  let textContent = '';

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

  return textContent;
}

处理大型PDF文件

分页加载优化性能：

function PDFViewer() {
  const [pages, setPages] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);

  const loadPage = async (pageNum) => {
    const newPage = (
      <Page 
        key={pageNum} 
        pageNumber={pageNum} 
        loading="Loading page..."
      />
    );
    setPages(prev => [...prev, newPage]);
  };

  useEffect(() => {
    loadPage(currentPage);
  }, [currentPage]);

  return (
    <div>
      <Document file="large.pdf">
        {pages}
      </Document>
      <button onClick={() => setCurrentPage(p => p + 1)}>
        Load Next Page
      </button>
    </div>
  );
}

自定义PDF渲染样式

调整页面样式：

<Page 
  pageNumber={1}
  width={600}
  renderTextLayer={false}
  renderAnnotationLayer={false}
  customTextRenderer={(textItem) => (
    <span style={{ color: 'red' }}>
      {textItem.str}
    </span>
  )}
/>

服务器端PDF处理

使用Node.js后端处理PDF：

const express = require('express');
const multer = require('multer');
const pdf = require('pdf-parse');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('pdf'), async (req, res) => {
  const dataBuffer = fs.readFileSync(req.file.path);
  const data = await pdf(dataBuffer);

  res.json({
    text: data.text,
    numPages: data.numpages
  });
});

前端调用API：

react项目实现导入pdf

async function uploadPDF(file) {
  const formData = new FormData();
  formData.append('pdf', file);

  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });

  return await response.json();
}