前端vue导入excel并读取内容

前端vue导入读取excel内容

一、安装xlsx包

npm i xlsx

二、在main.js文件中引入xlsx

import XLSX from xlsx

三、在组件中，实现功能

1.在上传文件的el-upload 组件的on-change事件绑定一个函数 ，这里我的函数叫 handle

2.handle函数中，实现文件的读取，并且，通过filechange函数，将读取后的数据，返回给父组件

    readFile(file) {
      //文件读取
      return new Promise((resolve) => {
        let reader = new FileReader();
        reader.readAsBinaryString(file); //以二进制的方式读取
        reader.onload = (ev) => {
          resolve(ev.target.result);
        };
      });
    },

    async handle(ev) {
      let file = ev.raw;
      if (this.lastUid == file.uid) {
        return;
      }
      this.lastUid = file.uid;
      if (file) {
        if (
          file.name.indexOf(".xls") != -1 ||
          file.name.indexOf(".xlsx") != -1
        ) {
        //这里进行了判断，只能读取这两种类型的文件。
          let data = await this.readFile(file);
          let workbook = XLSX.read(data, { type: "binary", cellDates: true }); //解析二进制格式数据
          let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
          let result = XLSX.utils.sheet_to_json(worksheet); //json数据格式
          this.$emit("filechange", result);//将数据通过filechange函数，传递给父组件
        }
      }
    },

3.实现效果
导入的表格为

得到的数据格式为：