POST导出文件

参考https://blog.csdn.net/sj1527382290/article/details/104700416/

如果封装了axios，请在需要导出的页面引入axios，然后直接使用axios进行使用

import axios from 'axios';
daoChuTableData() {
    //   this.$R.daoChuZhiLiangBaobiao().then((res) => {
    //     console.log("res :>> ", res);
    //     downloadFile(res);
    //   });
    axios({
        method: "post",
        url: '/clinbrain/api/compare/analysis/export',
        data: {},
        responseType: "blob" // 加上这个是重点
    }).then(res => {
        console.log('导出数据 :>> ', res);
    downloadFile(res.data);
    })
      function downloadFile(data) {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        let fileName = `导出.xls`;
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
      }
    },

1.vue + element ui 的 get 方法导出数据

let params = JSON.parse(JSON.stringify(this.filterForm));
    let exportUrl = "";
    // 清除为空的字段
     for (const key in params) {
         if(params[key] !== '') {
             exportUrl += "&" + key + "=" + params[key];
         }
     }
     window.open('/add/' + exportUrl.slice(1))
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

1. vue + element ui 的 post 方法导出数据

   this.$axios({
        method: "post",
        url: '接口地址',
        data: this.ruleForm,
        responseType: "blob" // 加上这个是重点
    }).then(res => {
        this.downloadFile(res.data);
    })
      downloadFile(data) {
        let url = window.URL.createObjectURL(new Blob([data]));
        let link = document.createElement("a");
        let fileName = `导出${utils.getTimeString(new Date())}.xls`;
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
        this.$message({
          message: "导出成功",
          type: "success"
        });
    },
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24
   • 25

2. vue + element ui 直接将文件传给后台

   <template>
   <div>
    <el-button type="primary" @click="upLoadHandle" icon="el-icon-upload">批量导入</el-button>
    <a :href="downUrl" style="display: none;" ref="downNode" target="_blank"></a>
    <input type="file" ref="upLoad" style="display: none;" @change="fileChangeHandle" />
   </div>
   </template>
   <script>
    methods: {
        upLoadHandle() {
          this.$refs.upLoad.value = ""; // 每次点击清空上次的值
          this.$refs.upLoad.click();
        },
        fileChangeHandle() {
          const file = this.$refs.upLoad.files[0];
          if (file) {
            let param = new FormData();
            param.append("excelFile", file);
            param.append("type", this.type);
            this.$axios.post("/add", param).then(res => {});
          }
        }
      }
   </script>
   • 1
   • 2
   • 3
   • 4
   • 5
   • 6
   • 7
   • 8
   • 9
   • 10
   • 11
   • 12
   • 13
   • 14
   • 15
   • 16
   • 17
   • 18
   • 19
   • 20
   • 21
   • 22
   • 23
   • 24

   4.vue + element ui 打开链接下载

   downExcelHandle(val) {
      if ( val.fileUrl == '') {
          this.$message({
              message: '链接为空，请联系后台人员',
              type: 'warning'
          });
          return
      }
      let downnode = document.createElement('a')
      let href = val.fileUrl
      downnode.href = href
      // 页面div的 id
      document.getElementById('serach').appendChild(downnode)
      downnode.click()
   },