【纯前端实现xlsx的解析并处理成table需要的格式】

news2025/10/31 16:35:43

概要

xlsx纯前端导入并解析成json

整体架构流程

xlsx导入并解析成json，并与table中的数据进行对比，根据唯一标识更新对应数据项

技术名词解释

vue2
xlsx

技术细节

首先下载xlsx依赖

npm install xlsx --save

然后在需要导入xlsx的地方

在这里插入图片描述
这里主要用input弹出选择文件框这里的导入按钮自己可以用自己的按钮
需要初始化的数据

data(){
	return{
	tableData:[]
	}
}

这个方法很重要，展示选择文件框

triggerFileInput(){
	this.$refs.fileInput.click();
}

然后开始解析xlsx内容

handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

          // 处理数据
          this.processData(jsonData);
        };
        reader.readAsArrayBuffer(file);
      }
    },

jsonData格式是这样的

[
  ["变量名", "描述", "计算方式"],
  ["abcd", "婚姻状况", "async"],
  ["abcde", "婚姻状况", "sync"]
]

然后就是最关键的一步，把这个数据处理成 [{}] ,标准的数组对象格式，我要处理的数据是个表格的数据，大致长这样，这也是tableData的数据

tableData:[
  {
    "vvv": 333,
    "varName": "abcd",
    "sort": "内部",
    "nnn": null,
    "vvv": null,
    "ccc": null,
    "aaa": "derivative",
    "dataType": "Integer",
    "version": 1,
    "description": "测试",
    "templateld": 5454,
    "templateName": "mmm",
    "dataSource": "报告",
    "explanation": "gg",
    "status": 1,
    "createDate": "2024-09-13 17:16:46",
    "history ld": 3232,
    "calculation": "sync"
  }
]

“变量名”, “描述”, “计算方式”，分别对应上面的varName，description，description字段
接下来就是处理方法了

processData(jsonData) {
  // 取得 Excel 数据（跳过标题行）
  const excelData = jsonData.slice(1);

  // 将 Excel 数据转换为对象数组
  const updatedData = excelData.map(row => {
    return {
      varName: row[0] ? row[0].replace(/\n/g, '') : '', // 去除换行符 
      description: row[1] || '', // 如果 row[1] 不存在，返回空字符串
      calculation: row[2] || '' // 如果 row[2] 不存在，返回空字符串
    };
  });

       // 更新 tableData
      this.tableData.forEach(baseItem => {
        const matchedItem = updatedData.find(item => item.varName === baseItem.varName);
        if (matchedItem) {
          baseItem.description = matchedItem.description;
          baseItem.calculation = matchedItem.calculation;
        }
      });
},,