通过xlsx库解析读取excel表格内容

一、使用

有时项目中有需要前端自己将本地的excel文件导入并获取内部数据,最终处理数据(批量导入等场景)

这时我们就可以用到一个库(xlsx)来读取excel中的内容,然后通过其API能力将数据转换成json格式

具体使用如下:

bash 复制代码
const TABLE_HEADER_ENUM = {
  	姓名: 'name',
  	工号: 'workId',
  	班次: 'shift',
  	月份: 'month',
  	日期: 'date',
  	年份: 'year'
  };
  
// 导入
  const fileImport = file => {
  // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        // 以二进制流方式读取得到整份excel表格对象
        const workbook = XLSX.read(result, { type: 'binary' });
        // 存储获取到的数据
        const data = {};
        const tempData = [];
        // 遍历每张工作表进行读取(这里默认只读取第一张表)
        for (const sheet in workbook.Sheets) {
          if (Object.prototype.hasOwnProperty.call(workbook.Sheets, sheet)) {
          // 利用 sheet_to_json 方法将 excel 转成 json 数据
            data[sheet] = tempData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
          }
        }
        const firstSheetData = data[Object.keys(workbook.Sheets)[0]];
        const importData = [];
        firstSheetData.forEach(item => {
          const itemObj = {};
          for (const attr in item) {
            const key = TABLE_HEADER_ENUM[attr] ? TABLE_HEADER_ENUM[attr] : attr; 
            
            itemObj[key] = item[attr];
          }
          importData.push(itemObj);
        });
        // 这里最终处理完的importData就是一个对象数组
      } catch (e) {
        Message.error(
          e.message || '文件导入失败',
        );
      }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(file[0].originFileObj);
  };

备注: 上文中的TABLE_HEADER_ENUM 是一个标题的中英文映射对象,因为我们excel表中标题经常是中文的,但接口中的传递字段基本都为英文,所以这个由你们实际excel表中的标题自定义

总结

这里我就简单记录下,有需要的小伙伴可以参考下

相关推荐
葡萄城技术团队几秒前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说2 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
华科云商xiao徐2 小时前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
举个栗子dhy2 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js