前端vue获取excell中的数据

Posted 2021-06-10 前端菜鸟，踩坑日常

这个功能我觉得还是挺好的，比如要批量上传一些数据，然后不用一个一个填入直接写个excell表然后一起上传，然后我在这边记录一下

首先用到了xlsx这个插件

下载

npm i xlsx --save

使用

在对应的页面中引入 

import XLSX from "xlsx";

首先上传文件获取到文件名，我这边使用的是element-ui的上传文件的方法

然后直接上代码

 // 读取excell
    importExcel(file) {
      // let file = file.files[0] // 使用传统的input方法需要加上这一步
      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.file2Xce(file).then((tabJson) => {
        if (tabJson && tabJson.length > 0) {
          this.xlsxJson = tabJson;
          console.log("数据", this.xlsxJson);
          this.excell.tel = [];
          this.excell.name = [];
          this.excell.smstext = [];
          this.xlsxJson[0].sheet.map((item) => {
            // console.log(item,"979887");
            this.excell.name.push(item.name);
            this.excell.tel.push(item.tel);
            this.excell.smstext.push(item.smstext);
          });
          console.log(this.excell, "我的excell");
        }
      });
    },
    file2Xce(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) => {
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]),
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file.raw);
        // reader.readAsBinaryString(file) // 传统input方法
      });
    },

养成把问题记成随笔的习惯，我觉得是一个非常好的做法