react-papaparse解析xls文件出现乱码问题求助

核心问题 #

react-papaparse 依赖的 Papa Parse 是纯文本/CSV解析工具，不支持解析二进制格式的 Excel 文件（.xls 是微软BIFF二进制格式，.xlsx是OOXML压缩格式）。你遇到的现象完全符合这个逻辑：

• 改后缀为.xls的txt本质还是纯文本，Papa Parse能正常识别解析；
• 真实的.xls是二进制文件，Papa Parse把二进制流当成纯文本解码，自然出现乱码。

解决方案：改用Excel解析库（SheetJS/xlsx） #

直接用 SheetJS 的 xlsx 库处理 Excel 文件，它能正确解析.xls/.xlsx的二进制格式。以下是修改后的代码示例：

import React, { CSSProperties, useState } from 'react';
import * as XLSX from 'xlsx';

const styles = {
  csvReader: {
    display: 'flex',
    flexDirection: 'row',
    marginBottom: 10,
  } as CSSProperties,
  browseFile: {
    width: '20%',
  } as CSSProperties,
  acceptedFile: {
    border: '1px solid #ccc',
    height: 45,
    lineHeight: 2.5,
    paddingLeft: 10,
    width: '80%',
  } as CSSProperties,
  remove: {
    borderRadius: 0,
    padding: '0 20px',
  } as CSSProperties,
};

export default function ExcelReader() {
  const [currentFile, setCurrentFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setCurrentFile(file);
    const reader = new FileReader();
    reader.onload = (loadEvent) => {
      const data = new Uint8Array(loadEvent.target?.result as ArrayBuffer);
      const workbook = XLSX.read(data, { type: 'array' });
      
      // 解析第一个工作表的数据
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const parsedData = XLSX.utils.sheet_to_json(worksheet);
      
      console.log('---------------------------');
      console.log(parsedData,'-=-=-=');
      console.log('---------------------------');
    };
    reader.readAsArrayBuffer(file);
  };

  const handleRemoveFile = () => {
    setCurrentFile(null);
    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
    fileInput.value = '';
  };

  return (
    <>
      <div style={styles.csvReader}>
        <label style={styles.browseFile}>
          <button type="button" style={{ width: '100%' }}>Browse file</button>
          <input
            type="file"
            accept=".xls,.xlsx"
            onChange={handleFileChange}
            style={{ display: 'none' }}
          />
        </label>
        <div style={styles.acceptedFile}>
          {currentFile && currentFile.name}
        </div>
        <button onClick={handleRemoveFile} style={styles.remove}>
          Remove
        </button>
      </div>
    </>
  );
}

关键说明 #

1. 安装依赖：先执行 npm install xlsx 或 yarn add xlsx；
2. 文件读取方式：用 FileReader.readAsArrayBuffer 读取二进制文件，避免文本解码错误；
3. 解析选项：XLSX.read 的 type: 'array' 对应ArrayBuffer输入，能正确识别Excel二进制格式；
4. 数据转换：sheet_to_json 可以把工作表转成JSON数组，方便后续业务处理。

额外提示 #

如果业务必须保留CSV解析流程，可引导用户将Excel文件另存为CSV格式后上传，此时react-papaparse就能正常解析。

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