ReactJS中使用XLSX包将Excel转指定JSON格式的问题求助

核心思路 #

XLSX默认输出扁平结构的JSON，要得到你需要的嵌套格式，需手动处理原始数据：

• 提取每行的Class和Currency字段作为顶层对象属性
• 将所有日期列（非Class、Currency的列）提取为Price数组，每个元素包含date和price键值对
• 每行数据对应一个最终的对象结构

完整代码示例 #

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

const ExcelToJsonConverter = () => {
  const [convertedJson, setConvertedJson] = useState(null);

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      const data = new Uint8Array(event.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      // 获取原始扁平JSON，保留表头映射
      const rawData = XLSX.utils.sheet_to_json(worksheet);

      // 转换为目标格式
      const formattedData = rawData.map(row => {
        // 提取Class和Currency并包装为嵌套对象
        const classObj = { name: row.Class };
        const currencyObj = { currencyCode: row.Currency };
        
        // 提取日期与价格，生成Price数组
        const priceArray = Object.entries(row)
          .filter(([key]) => key !== 'Class' && key !== 'Currency')
          .map(([date, price]) => ({
            date,
            price: Number(price) // 确保价格为数字类型
          }));

        return {
          class: classObj,
          Currency: currencyObj,
          Price: priceArray
        };
      });

      setConvertedJson(JSON.stringify(formattedData, null, 2));
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <input type="file" accept=".xlsx, .xls" onChange={handleFileUpload} />
      {convertedJson && (
        <div>
          <h3>转换后的JSON:</h3>
          <pre>{convertedJson}</pre>
        </div>
      )}
    </div>
  );
};

export default ExcelToJsonConverter;

关键代码说明 #

• 文件解析：通过FileReader读取Excel文件，XLSX将其解析为工作簿和工作表
• 原始数据转换：XLSX.utils.sheet_to_json把工作表转为扁平JSON数组，每行对应一个对象
• 格式重构：
  1. 从每行中提取Class和Currency，包装为目标结构的嵌套对象
  2. 遍历行内所有键值对，过滤掉非日期字段后，将日期和价格映射为Price数组元素
  3. 强制转换价格为数字类型，避免字符串格式问题
• 结果展示：将转换后的JSON格式化后渲染到页面

注意事项 #

• 确保Excel表头与代码中字段名完全匹配（Class、Currency及日期列表头）
• 空行会被sheet_to_json自动跳过，无需额外处理
• 若需调整日期格式（如统一为YYYY-MM-DD），可在生成date字段时添加格式化逻辑

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