vue项目文件导入导出的方法总结

文件导入

点击文件上传时点击按钮的结构：用element ui组件的el-upload组件，点击时的方法需要传入一个file文件的参数下来

// 按钮结构
<el-upload
    class="elUpload"
    :before-upload="handleBeforeUpload"
    :limit="1"
>
   <el-button type="primary">导入</el-button>
</el-upload>


// 点击按钮对应方法
handleBeforeUpload(file) {
    this.importExcel(file);
    return false;
},

封装需要上传文件后端的接口

// 导入专项认定数据
export const importspecialInfo = (file) => {
  // new 一个formDate表单对象
  const formData = new FormData();
  // 把文件添加到表单对象中
  formData.append('file', file);
  return request({
    headers: {
      "Content-Type": "multipart/form-data"
    },
    url: '/api/special/import',
    method: 'post',
    data: formData
  })
}

接下来就是调用后端接口进行文件导入操作

importExcel(file) {
      importspecialInfo(file).then((res) => {
        // 导入成功地后端返回数据结果
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message({
            message: "导入成功",
            type: "success",
          });
          // 成功后重新拉取列表数据
          this.getList();
        } else {
          // 假设 data 是返回来的二进制数据
          // 下面操作就是导入失败之后的下载表格的操作
          const data = res.data;
          const url = window.URL.createObjectURL(
            new Blob([data], {
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            })
          );
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "excel.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      });
    },

文件导出

封装导出接口

// 导出专项认定统计数据
export const enterpriseList = (data) => {
  return request({
    url: '/api/special/exprotlist',
    method: 'get',
    data
  })
}

 点击导出时的操作

<el-button type="primary" @click="downLoadList">导出数据</el-button>

获取token的方法
import { getToken } from "@/util/auth";

downLoadList() {
      this.$confirm("是否导出用户数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        window.open(
          `/api/special/exprotlist?${
            this.website.tokenHeader
          }=${getToken()}&orgcode=${this.searchForm.orgcode}&orgname=${
            this.searchForm.orgname
          }&startdate=${this.searchForm.startdate}&enddate=${
            this.searchForm.enddate
          }`
        );
      });
    },