vue 导入excel

npm i xlsx -S
import { read, utils } from "xlsx"
<el-upload class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
           accept='.xls,.xlsx'
           :on-success="handleChange"               
           :show-file-list='false'   
           :file-list="fileList">
  <el-button size="small"
             type="primary">导入EXCEL</el-button>
</el-upload>
handleChange(res, file, fileList) {
      // 将文件放入
      for (let i = 0; i < fileList.length; i++) {
        if (file.name != fileList[i].name) {
          this.fileList.push({
            name: file.name,
            url: "",
            uid: file.uid
          });
        }
      }
      const files = { 0: file };
      this.readExcel(files);
    },

    readExcel(file) {
      const fileReader = new FileReader();

      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = read(data, { type: "binary" });
          const params = [];
          // 取对应表生成json表格内容
          workbook.SheetNames.forEach(item => {
            this.exceltableData.push(utils.sheet_to_json(workbook.Sheets[item]));
          });

          // 该算法仅针对表头无合并的情况
          if (this.exceltableData.length > 0) {
            // 获取excel中第一个表格数据tableData[0][0],并且将表头提取出来
            for (const key in this.exceltableData[0][0]) {
              this.tableHead.push(key);
            }
          }

          console.log(this.exceltableData[0]) // this.exceltableData[0]就是excel导入的数据

          // 重写数据
        } catch (e) {
          console.log("error:" + e);
          return false;
        }
      };
      fileReader.readAsBinaryString(file[0].raw);


    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值