vue中使用el-upload上传excel生成table数据

vue中使用el-upload上传excel生成table数据

最近公司有个需要上传excel的需求,可以让上传的excel转换为table数据,方便用户查看,由于之前没做过此类的需求,所以我百度了一波,了解到xlsx这个插件可以转换进行导入导出excel,既然如此,那就决定用你了.以下是功能展示

好了 接下里说如何实现此功能

首先我们先下载xlsx这个包

npm i xlsx

然后在你想要实现的地方导入

import xlsx from "xlsx";

我在这里展示以下我的结构

<div class="excel">
    <el-upload
      class="upload-demo"
      action=""
      accept=".xls, .xlsx"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleChange"
    >
      <el-button
        size="small"
        type="primary"
      >点击上传excel</el-button>
    </el-upload>
    <div class="table">
      <el-table
        v-if="tableData.length > 0"
        :data="tableData"
      >
        <el-table-column
          v-for="item in tableHeader"
          :key="item"
          :prop="item"
          :label="item"
        ></el-table-column>
      </el-table>
    </div>

我是在el-upload的on-change事件中读取上传的文件的

 async handleChange(file, fileList) {
      var data = file.raw;
      const excel = await this.readFile(data);
      // 使用xlsx读取二进制数据 生成excel的全部信息
      var workbook = xlsx.read(excel, { type: "binary" });
      // 通过xlsx转换为可读的表格数据 
      //workbook.Sheets[workbook.SheetNames[0]] 获取当前上传的表格的信息,例如总共有几行几列啥的
      data = xlsx.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
      const header = this.getHeaderRow(workbook.Sheets[workbook.SheetNames[0]]);
      this.tableData = data;
      this.tableHeader = header;
    },

readFile方法如下

 // 读取上传的文件
    readFile(file) {
      return new Promise((resolve, reject) => {
        var reader = new FileReader();
        // 把文件转为二进制
        reader.readAsBinaryString(file);
        reader.onload = e => {
          // console.log(e.target.result);
          resolve(e.target.result);
        };
      });
    },

此时我们已经获取到了转换好的数组对象数据,如下

但是el-table是需要表头信息的 可以仔细查看我的on-change事件里面是有一个getHeaderRow方法来获取表头信息的

 // 获取表头信息
    getHeaderRow(sheet) {
      const headers = [];
      //获取总共的行数和列数
      const range = xlsx.utils.decode_range(sheet["!ref"]);
      let C;
      const R = range.s.r; // 开始行
      //遍历每列
      for (C = range.s.c; C <= range.e.c; ++C) {
        // 找到每列的第一行数据即使表头
        const cell = sheet[xlsx.utils.encode_cell({ c: C, r: R })];
        let hdr = "UNKNOWN " + C;
        if (cell && cell.t) hdr = xlsx.utils.format_cell(cell);
        headers.push(hdr);
      }
      return headers;
    }

至此 ,excel已经成功生成到页面tablel了,因为我是写的demo所以有些判断就没写的那么详细,比如可能需要判断是否是以xxx后缀才能上传,上传表格的大小不能超过多少,当然,你也可以把这些代码封装成一个组件…

好了以上就是我分享的如何在vue中上传excel文件,如果你觉得有帮助的话,可以为我点一个赞哦,搬运请写明出处,万分感谢!!!