vue 获取 excel 文件中的数据

首先下载依赖

0.16.0 版本 的 xlsx
npm  install xlsx@0.16.0 --save

//使用
import XLSX from 'xlsx';//解析excel

一、 上传文件后获取数据,引用element-ui中的upload

<el-upload
          class="upload-demo"
          action="/"
          :on-change="getExcel"
          :auto-upload="false"
          :show-file-list="false"
        >
          <el-button size="small" type="primary">上传文件</el-button>
        </el-upload>

二、 上传文件后获取数据,input 中 type= file 上传

 <input type=”file“ @change="getExcel"/>

js代码

  //上传白名单
   getExcel(file) {
      // let file = file.files[0] // 方式二需要加上这一步
      const types = file.name.split(".")[1];
      const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
        item => item === types
      );
      if (!fileType) {
        this.$message("格式错误！请重新选择");
        return;
      }
      this.analysis(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          //成功解析出数据
          this.xlsxJson = tabJson;
          console.log(JSON.stringify(this.xlsxJson[0].sheet))
          console.log("数据", this.xlsxJson);
          // xlsxJson就是解析出来的json数据,数据格式如下
          // [
          //   {
          //     sheetName: sheet      //     sheet: sheetData
          //   }
          // ]
        }
      });
    },
    //解析excel
    analysis(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            console.log(sheetName)
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
        // reader.readAsBinaryString(file) // 传统input方法
      });
    },