前端解析excel

第一步:安装xlsx;

npm install xlsx

第二步:将文件解析成json

2.1使用并获取excel中sheet1、sheet2的对应数据

复制代码
    const workbook = (await excelToJsonAll(e.file)) || [];
    const sheetNameArr = workbook.SheetNames.filter((item) =>
      item.includes('_Schema'),
    );
    let sheet1, sheet2;
    if (sheetNameArr.length > 0) {
      // 解析出来包含_Schema的sheet
      sheet1 = getIndexSheetData(workbook, 1);
      sheet2 = getIndexSheetData(workbook, 2);
    } else {
      sheet1 = getIndexSheetData(workbook, 0);
      sheet2 = getIndexSheetData(workbook, 1);
    }

2.2封装解析方法

复制代码
// 从工作簿中获取第几个工作表的数据
export function getIndexSheetData(
  workbook: WorkBook,
  index: number = 0,
): any[] {
  const firstSheetName = workbook.SheetNames[index];
  if (!firstSheetName) {
    throw new Error('No sheets found in the workbook');
  }

  const workSheet = workbook.Sheets[firstSheetName];
  if (!workSheet) {
    throw new Error(`Sheet "${firstSheetName}" not found in the workbook`);
  }

  return utils.sheet_to_json(workSheet);
}


// 读取 Excel 文件并转换为 JSON 数据
export async function excelToJsonAll(file: File) {
  const buffer = await file.arrayBuffer(); // 读取文件并转换为 ArrayBuffer

  const data = new Uint8Array(buffer);
  const workbook = read(data, { type: 'array' });
  // 对第一个进行校验是否有
  const firstSheetName = workbook.SheetNames[0];
  if (!firstSheetName) {
    throw new Error('No sheets found in the workbook');
  }

  const workSheet = workbook.Sheets[firstSheetName];
  if (!workSheet) {
    throw new Error(`Sheet "${firstSheetName}" not found in the workbook`);
  }

  return workbook;
}

第三步:获取excel的数据

复制代码
let data=[] 
for (const material of sheet1) {
      const value= toString(material['表头文字']);
      ....
      data.push(value)
}
相关推荐
小码哥_常16 小时前
被EdgeToEdge适配折磨疯了,谁懂!
前端
小码哥_常16 小时前
从Groovy到KTS:Android Gradle脚本的华丽转身
前端
灵感__idea16 小时前
Hello 算法:复杂问题的应对策略
前端·javascript·算法
麦麦鸡腿堡17 小时前
JavaWeb_请求参数,设置响应数据,分层解耦
java·开发语言·前端
Dxy123931021618 小时前
CSS常用样式详解:从基础到进阶的全面指南
前端·css
IT_陈寒18 小时前
SpringBoot自动配置揭秘:5个让开发效率翻倍的隐藏技巧
前端·人工智能·后端
Moment18 小时前
前端工程化 + AI 赋能,从需求到运维一条龙怎么搭 ❓❓❓
前端·javascript·面试
Joker Zxc18 小时前
【前端基础(Javascript部分)】6、用JavaScript的递归函数和for循环,计算斐波那契数列的第 n 项值
开发语言·前端·javascript
Highcharts.js18 小时前
React 图表如何实现下钻(Drilldown)效果
开发语言·前端·javascript·react.js·前端框架·数据可视化·highcharts
橙露19 小时前
Webpack/Vite 打包优化:打包体积减半、速度翻倍
前端·webpack·node.js