vue + axios实现文件下载

1、导出excel数据

button定义

    <div style="text-align:left">
      <el-button type="primary" v-on:click="exportExcelData()">数据导出</el-button>
    </div>

下载的methods中的方法：
有2种方式：

exportExcelData(){
   
        // 导出excel数据表

        /** 第一种方法 */
        // let tempForm = document.createElement("form");//创建form表单，以下数form表单的各种参数
        // tempForm.id = "tempForm1";
        // tempForm.method = "get";
        // tempForm.action = '/user/exportData';
        // tempForm.target="_";
        // let input = document.createElement("input");
        // tempForm.appendChild(input);
        //
        // if(document.all){
   
        //   tempForm.attachEvent("onsubmit",function(){});//IE
        // }else{
   
        //   var subObj = tempForm.addEventListener("submit",function(){},false);//firefox
        // }
        // document.body.appendChild(tempForm);
        // if(document.all){
   
        //   tempForm.fireEvent("onsubmit");
        // }else{
   
        //   tempForm.dispatchEvent(new Event("submit"));
        // }
        // tempForm.submit();//提交POST请求
        // document.body.removeChild(tempForm);

        /** 第二种方法，浏览器中不会出现新建标签页，但是需要手动获取下载的文件名 */
        const _loading = loading(`数据导出中，请稍后...`)
        const config = {
   
          onDownloadProgress: progressEvent => {
   
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0))
            _loading.setText('数据导出中，进度：' + this.progressPercent + "%") //更新dialog进度，优化体验
            console.log(progressEvent)
          },
          responseType:'blob'
        }
        this.$axios.get('/user/exportData', config)
          .then(resp => {
   
            console.log(resp)
            _loading.close()

            let contentDisposition = resp.headers['content-disposition'];
            console.log(contentDisposition)
            let fileName = "上海电气工业APP大赛报名表.xlsx"
            if (contentDisposition) {
   
              fileName = window.decodeURI(resp.headers['content-disposition'].split('=')[1]);
              console.log('获取到的文件名 = ' + fileName)
            }

            let blob = new Blob([resp.data], {
   type: 'application/octet-stream'});
            if (window.navigator.msSaveOrOpenBlob) {
    //支持IE
              navigator.msSaveBlob(blob, fileName);
            } else {
   
              let link = document.createElement('a');
              link.style.display = "none";
              link.href = window.URL.createObjectURL(blob);
              link.download = fileName;
              document.body.appendChild(link);
              link.click();
              //释放内存
              window.URL.revokeObjectURL(link.href);
              document.body.removeChild(link);
            }

            // 提示用户
            // if(resp.status == 200){
   
            //   this.$message({
   
            //     message: "导出完成",
            //     type: 'success'
            //   });
            // } else {
   
            //   this.$message({
   
            //     message: "导出失败",
            //     type: 'error'
            //   });
            // }

          })
          .catch(function (error) {
    // 请求失败处理
            console.log('请求本地接口失败' + error);
          });


      },

吼他springboot接口：

    @Transactional
    @ApiOperation(notes = "报名数据导出", value = "报名数据导出", httpMethod = "GET")
    @GetMapping(value = "/exportData" , produces = "application/json;charset=UTF-8")
    public void exportData(HttpServletResponse response) {
   
        userService.exportData(response);
    }

exportData接口实现：

<