使用vue导入excel文件并把文件中的数据在el-table表格中

先看一下效果吧

QQ录屏20220815152955

1、安装XLSX

 npm i XLSX -S

2、

<template>
  <div class="rtsp-container">
    <div style="display: flex">
      <el-button type="text" @click="downloadTemplate">下载模板</el-button>
      <div style="margin-left: 40px">
        <input
          class="file"
          accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          type="file"
          ref="upload"
          @change="changeFile"
        />
        <el-button class="btn btn-right-margin" @click="browseFile"
          >选择文件</el-button
        >
        <el-input class="file-name" readonly :value="fileName" />
        <el-button class="btn btn-blue" type="primary" @click="importExcelData"
          >导入</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      height="270"
      style="width: 100%; margin-bottom: 30px"
    >
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="type" label="设备类型"> </el-table-column>
      <el-table-column prop="name" label="设备名称"> </el-table-column>
      <el-table-column
        prop="rtsp"
        width="180"
        :show-overflow-tooltip="true"
        label="码流地址"
      >
      </el-table-column>
      <el-table-column
        prop="historyRtsp"
        width="180"
        :show-overflow-tooltip="true"
        label="历史视频流地址"
      >
      </el-table-column>
      <el-table-column label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "RTSP",
  data() {
    return {
      fileName: "",
      fileTemp: null,
      tableData: [],
    };
  },
  watch:{
    tableData:{
      handler(val){
        console.log(val);
      },
      immediate:true,
      deep:true
    }
  },
  methods: {
    downloadTemplate() {
      let a = document.createElement("a"); //创建一个<a></a>标签
      a.href = "/static/file/template.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      a.download = "批量导入RTSP通道模板.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    changeFile() {
      this.fileName = this.$refs.upload.files[0].name;
      this.fileTemp = this.$refs.upload.files[0];
    },
    browseFile() {
      this.$refs.upload.click();
    },
    importExcelData() {
      if (this.fileTemp) {
        let _this = this;
        this.file = this.fileTemp;
        let rABS = false; //是否将文件读取为二进制字符串
        let f = this.file;
        let reader = new FileReader();
        FileReader.prototype.readAsBinaryString = function (f) {
          let binary = "";
          let rABS = false; //是否将文件读取为二进制字符串
          let wb;
          let outData;
          let reader = new FileReader();
          reader.onload = function (e) {
            let bytes = new Uint8Array(reader.result);
            let length = bytes.byteLength;
            for (let i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            let XLSX = require("xlsx");
            if (rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), {
                type: "base64",
              });
            } else {
              wb = XLSX.read(binary, {
                type: "binary",
              });
            }
            outData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            let da = [...outData];
            da = da.map((item, index) => {
              let newItem = {
                id: index + 1,
                type: item["设备类型"],
                name: item["设备名称"],
                rtsp: item["码流地址"],
              };
              for (const key in item) {
                if (key.indexOf("获取历史视频流地址") !== -1) {
                  newItem.historyRtsp = item[key];
                }
              }
              return newItem;
            });
            _this.tableData = [...da];
          };
          reader.readAsArrayBuffer(f);
        };
        if (rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      }
    },
    del(row) {
      this.tableData = this.tableData.filter((item) => item.id !== row.id);
    },
  },
};
</script>
<style >
.rtsp-container {
  width: 100%;
}
.rtsp-container .file {
  display: none;
}

.rtsp-container .file-name {
  height: 34px;
  width: 350px;
  margin: 20px;
}
</style>