vue項目中的導出功能

后台返回二進制文本流，前台接收下載文件

<upload :updata="updataUpload" :del="delUpload" @refresh="searchData" :param="uploadParam"></upload>
<el-button @click="exportTable" size="small">導出</el-button>

exportTable() {
      exportData(this.getParam(this.searchForm)).then(res => {
        let fileName = res.headers["content-disposition"].split("=")[1];
        this.downloadFile(res.data, fileName);
      });
    },
downloadFile(blob, fileName) {
      if (navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        let url = window.URL.createObjectURL(new Blob([blob]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        link.remove();
      }
    }

這樣在打開 文件時提示文件已損壞，后來發現是沒有設置響應行類型

 

 

 

 接下來就可以順利打開文件。