如何使用React JS将含表格的PDF转换为Excel并支持展示下载？

核心依赖库 #

先安装几个必备的npm包：

• pdfjs-dist：Mozilla官方的PDF解析库，用于读取PDF内容
• xlsx：SheetJS核心库，用于生成Excel文件
• pdf-table-extract（可选）：简化PDF表格数据提取逻辑，适合新手快速上手

安装命令：

npm install pdfjs-dist xlsx pdf-table-extract

完整实现步骤 #

以下是可直接运行的React组件示例，包含PDF上传、表格提取、页面展示、Excel导出全流程：

import React, { useState } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import * as XLSX from 'xlsx';
import extract from 'pdf-table-extract';

// 配置pdfjs的worker路径（本地开发需设置）
pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;

const PdfToExcelConverter = () => {
  const [tableData, setTableData] = useState([]);
  const [loading, setLoading] = useState(false);

  // 处理PDF文件上传
  const handleFileUpload = async (e) => {
    const file = e.target.files[0];
    if (!file || !file.type.includes('pdf')) return;

    setLoading(true);
    try {
      const filePath = URL.createObjectURL(file);
      const tables = await extract(filePath);
      
      // 默认取第一页的第一个表格，可根据需求调整遍历逻辑
      const parsedData = tables[0].pages[0].tables[0];
      setTableData(parsedData);
    } catch (err) {
      console.error('PDF解析失败:', err);
      alert('无法提取PDF中的表格，请检查文件是否为文本型PDF');
    } finally {
      setLoading(false);
    }
  };

  // 导出Excel文件
  const handleExportExcel = () => {
    if (tableData.length === 0) return;

    const worksheet = XLSX.utils.aoa_to_sheet(tableData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'PDF表格数据');
    XLSX.writeFile(workbook, 'pdf-table-to-excel.xlsx');
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>PDF表格转Excel工具</h2>
      <input
        type="file"
        accept=".pdf"
        onChange={handleFileUpload}
        disabled={loading}
        style={{ marginBottom: '20px' }}
      />
      
      {loading && <p>正在解析PDF...</p>}
      
      {tableData.length > 0 && (
        <div>
          <h3>提取到的表格内容：</h3>
          <table border="1" style={{ borderCollapse: 'collapse', width: '100%', marginBottom: '20px' }}>
            <tbody>
              {tableData.map((row, rowIndex) => (
                <tr key={rowIndex}>
                  {row.map((cell, cellIndex) => (
                    <td key={cellIndex} style={{ padding: '8px', border: '1px solid #ccc' }}>
                      {cell}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
          <button onClick={handleExportExcel} style={{ padding: '8px 16px', cursor: 'pointer' }}>
            导出为Excel
          </button>
        </div>
      )}
    </div>
  );
};

export default PdfToExcelConverter;

关键说明 #

1. 表格提取限制：pdf-table-extract仅能识别文本型PDF的表格，如果PDF表格是图片格式，需要搭配tesseract.js这类OCR工具处理。
2. 多表格/多页适配：如果PDF包含多页或多个表格，可修改代码中的tables[0].pages[0].tables[0]逻辑，遍历所有页面和表格进行数据合并。
3. worker路径配置：生产环境可将worker文件打包到项目中，或使用项目内的本地路径替代CDN地址。
4. 样式自定义：示例使用原生HTML表格，你可以替换为Ant Design、Material-UI等UI库的表格组件优化展示效果。

无第三方提取库的替代方案 #

若不想依赖pdf-table-extract，可直接用pdfjs-dist手动解析：

• 调用pdfjsLib.getDocument加载PDF，获取每页的文本内容与坐标信息
• 根据文本的x/y坐标判断单元格归属，自行组装表格数据
• 该方式灵活性更高，但需要处理更多边界情况，适合有一定JS基础的开发者

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