vue——通過post方法下載文件並重命名

參考：https://blog.csdn.net/u011301203/article/details/102629952

　　https://www.cnblogs.com/codesyofo/p/14142197.html

 

前端

downLoad(){
        let that = this
         let params = { // 根據后端需求傳參
            meetName: encodeURI(that.meetName),
            htmlText: encodeURI(that.content)
          }
          axios.post('xxx',
　　　　　　　　 params, 
　　　　　　　　{responseType: "arraybuffer"} // 必須添加項，告訴服務器需要的響應格式
          ).then(function (res) {
            const filename = decodeURI(res.headers['filename']); // 后端返回的文件名
            let blob = new Blob([res.data], {type: 'application/msword;charset=utf-8'}); // 將二進制流轉為blob
            let a = document.createElement('a');
            let url = window.URL.createObjectURL(blob); // 創建新的url並指向file對象或blob對象的地址
            a.href = url;
            a.download = filename; // 設置下載文件名
            let body = document.getElementsByTagName('body')[0];
            body.appendChild(a);
            a.click();
            body.removeChild(a); // 下載完成移除元素
            window.URL.revokeObjectURL(url); // 釋放內存
          })
}

 

后端

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)

 

出現的問題

現象

axios無法獲取響應頭headers的Content-Disposition字段

原因

默認情況下，header只有六種 simple response headers （簡單響應首部）可以暴露給外部：

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

這里的暴露給外部，意思是讓客戶端可以訪問得到，既可以在 Network 里看到，也可以在代碼里獲取到他們的值。

上面問題提到的 content-disposition 不在其中，所以即使服務器在協議回包里加了該字段，但因沒“暴露”給外部，客戶端就“看得到，吃不到”。

而響應首部 Access-Control-Expose-Headers 就是控制“暴露”的開關，它列出了哪些首部可以作為響應的一部分暴露給外部。

所以如果想要讓客戶端可以訪問到其他的首部信息，服務器不僅要在heade里加入該首部，還要將它們在 Access-Control-Expose-Headers 里面列出來，即上面后端的處理方法