React-PDF实现多PDF文件文件名与页数展示问题求助

要实现多选PDF后展示文件名、页数及PDF内容，你需要调整状态管理逻辑，结合react-pdf的异步加载事件来获取页数并渲染预览。以下是完整的实现代码：

import { useState } from 'react';
import { Document, Page } from '@react-pdf/renderer';

export default function MultiPdfViewer() {
  const [pdfFiles, setPdfFiles] = useState([]);

  const handleFileSelect = (e) => {
    const selectedFiles = Array.from(e.target.files);
    // 初始化每个PDF的状态：文件对象、文件名、页数（初始为null）、加载状态
    const pdfData = selectedFiles.map(file => ({
      file,
      name: file.name,
      numPages: null,
      isLoading: true,
      hasError: false
    }));
    setPdfFiles(pdfData);
  };

  const updatePdfPageCount = (index, numPages) => {
    setPdfFiles(prevState => {
      const updatedFiles = [...prevState];
      updatedFiles[index] = {
        ...updatedFiles[index],
        numPages,
        isLoading: false
      };
      return updatedFiles;
    });
  };

  const markPdfError = (index) => {
    setPdfFiles(prevState => {
      const updatedFiles = [...prevState];
      updatedFiles[index] = {
        ...updatedFiles[index],
        isLoading: false,
        hasError: true
      };
      return updatedFiles;
    });
  };

  return (
    <div style={{ padding: '20px' }}>
      <input
        type="file"
        multiple
        accept=".pdf"
        onChange={handleFileSelect}
        style={{ marginBottom: '20px' }}
      />
      <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))' }}>
        {pdfFiles.map((pdf, idx) => (
          <div key={idx} style={{ border: '1px solid #eee', padding: '15px', borderRadius: '8px' }}>
            <h4 style={{ margin: '0 0 10px 0' }}>{pdf.name}</h4>
            {pdf.isLoading ? (
              <p>加载PDF中...</p>
            ) : pdf.hasError ? (
              <p style={{ color: 'red' }}>无法加载此PDF文件</p>
            ) : (
              <p>总页数：{pdf.numPages}</p>
            )}
            <div style={{ marginTop: '10px' }}>
              {!pdf.isLoading && !pdf.hasError && (
                <Document
                  file={pdf.file}
                  onLoadSuccess={({ numPages }) => updatePdfPageCount(idx, numPages)}
                  onLoadError={() => markPdfError(idx)}
                >
                  <Page pageNumber={1} width={280} />
                </Document>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

核心要点说明 #

• 状态精细化管理：每个PDF条目单独维护isLoading、hasError、numPages状态，避免多个PDF加载状态相互干扰
• 直接使用File对象：react-pdf的Document组件支持直接传入File对象，无需手动转换为Data URL或Blob URL
• 异步事件监听：通过onLoadSuccess事件获取PDF总页数，onLoadError处理加载失败场景
• 响应式布局：使用CSS Grid实现自适应的PDF预览卡片布局，提升视觉体验

注意事项 #

1. 确保已安装正确的依赖包：npm install @react-pdf/renderer
2. 浏览器环境需支持PDF解析，部分旧浏览器可能需要额外的polyfill
3. 若需展示多页PDF，可通过循环渲染Page组件并传入不同的pageNumber值

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