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

概要

xlsx纯前端导入并解析成json

整体架构流程

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

技术名词解释

  • vue2
  • xlsx

技术细节

  1. 首先下载xlsx依赖
javascript 复制代码
npm install xlsx --save
  1. 然后在需要导入xlsx的地方


这里主要用input弹出选择文件框 这里的导入按钮自己可以用自己的按钮

需要初始化的数据

javascript 复制代码
data(){
	return{
	tableData:[]
	}
}
  1. 这个方法很重要,展示选择文件框
javascript 复制代码
triggerFileInput(){
	this.$refs.fileInput.click();
}
  1. 然后开始解析xlsx内容
javascript 复制代码
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格式是这样的

javascript 复制代码
[
  ["变量名", "描述", "计算方式"],
  ["abcd", "婚姻状况", "async"],
  ["abcde", "婚姻状况", "sync"]
]
  1. 然后就是最关键的一步,把这个数据处理成 [{}] ,标准的数组对象格式,我要处理的数据是个表格的数据,大致长这样,这也是tableData的数据
javascript 复制代码
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"
  }
]
  1. "变量名", "描述", "计算方式",分别对应上面的varName,description,description字段
    接下来就是处理方法了
javascript 复制代码
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;
        }
      });
},,

注* varName: row[0] ? row[0].replace(/\n/g, '') : '', // 去除换行符

这里很关键,因为直接解析xlsx,处理成的数据带换行符/n,所有刚开始怎么都替换数据不成功,因为数据带/n

  1. 这里的数据就已经替换成功了,这里其实是批量修改数据,因为是根据varName进行匹配的,如果有不匹配也需要导入的需求自己修改一下逻辑就行。

小结

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

相关推荐
IT_陈寒13 分钟前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding24 分钟前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖1 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花1 小时前
i18n国际语言化配置
前端
编程贝多芬1 小时前
Promise 的场景和最佳实践
前端·javascript
Asort1 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio1 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript