vue 导入导出excel表格

Xnip2021-01-04_09-45-31.jpg

//导出

        <el-form-item>
          <el-button @click="onExport" class="btn">导出</el-button>
        </el-form-item>

//导入

        <el-form-item>
          <el-upload
            class="upload-demo"
            action=""
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :before-remove="beforeRemove"
            :http-request="uploadFile"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button class="btn">导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传Excel文件</div> -->
          </el-upload>
        </el-form-item>

export default {
data() {
  return {
    fileList: [],
    UploadSuccess: false,
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

  methods: {
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    async DietUp_load(form) {
      const res = await Diet_Up_load(form);
      if (res.result == 0) {
        this.UploadSuccess = true;
        this.$message({
          type: "success",
          message: "上传成功!"
        });
      } else {
        this.UploadSuccess = false;
        this.fileList = [];
        this.$message({
          type: "warning",
          message: "请重新导入!"
        });
      }
    },
    uploadFile(item) {
      var form = new FormData();
      form.append("file", item.file);
      this.DietUp_load(form); //导入//form接口
    },
}

======

   onExport() {//导出按钮
      this.pageIndex = 1;
      this.get_Wxexport();
    },

   get_Wxexport() {//调用导出接口
      let Params = {
        applicantName: this.formInline.applicantName, //报修人
        applicantPhoneNumber: this.formInline.applicantPhoneNumber, //报修手机
        repairerName: this.formInline.repairerName, //维修人
        repairerPhoneNumber: this.formInline.repairerPhoneNumber, //维修人手机
        formState: this.formInline.formState, //状态
        order: "id desc",
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      axios({
        url: `manager-api/repair-form/export`,
        method: "get",
        params: Params,
        headers: {
          Authorization: getToken()
        },
        responseType: "blob"
      })
        .then(res => {
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          let link = document.createElement("a");
          link.href = URL.createObjectURL(blob);
          link.setAttribute(
            "download",
            moment().format("MM-DD") + "报修和维修记录.xlsx"
          );
          link.click();
          link = null;
          this.$message.success("报修和维修记录 导出成功");
        })
        .catch(err => {
          console.log(err);
        });
    }