這里介紹兩種方法翔冀，使用 Blob對象 和 使用 js-file-download
這兩種方法下載的文件都不會亂碼淹真，但是 不管使用哪種方法为障，發(fā)送請求時(shí)都要設(shè)置 responseType
方法一：使用Blob對象
Blob對象表示一個(gè)不可變齐莲、原始數(shù)據(jù)的類文件對象亿鲜。Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)允蜈。File接口基于Blob，繼承了blob的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
一陷寝、Blob() 構(gòu)造函數(shù)
語法
var aBlob = new Blob( array, options );
參數(shù)
array 是一個(gè)由
ArrayBuffer,ArrayBufferView,Blob,DOMString等對象構(gòu)成的Array，或者其他類似對象的混合體其馏，它將會被放進(jìn)Blob凤跑。DOMStrings會被編碼為UTF-8。-
options 是可選的叛复，它可能會指定如下兩個(gè)屬性：
-
type仔引，默認(rèn)值為""，它代表了將會被放入到blob中的數(shù)組內(nèi)容的MIME類型褐奥。也就是設(shè)置文件類型咖耘。 -
endings，默認(rèn)值為"transparent"撬码，用于指定包含行結(jié)束符\n的字符串如何被寫入儿倒。 它是以下兩個(gè)值中的一個(gè)："native"，代表行結(jié)束符會被更改為適合宿主操作系統(tǒng)文件系統(tǒng)的換行符呜笑，或者"transparent"夫否，代表會保持blob中保存的結(jié)束符不變。
-
?
二叫胁、URL對象
通過創(chuàng)建URL對象指定文件的下載鏈接凰慈。
// 創(chuàng)建新的URL表示指定的File對象或者Blob對象。
let objectURL = window.URL.createObjectURL(blob);
window.URL.revokeObjectURL(objectURL); // 釋放內(nèi)存
在每次調(diào)用createObjectURL()方法時(shí)驼鹅，都會創(chuàng)建一個(gè)新的 URL 對象微谓，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不再需要這些 URL 對象時(shí)输钩，每個(gè)對象必須通過調(diào)用 URL.revokeObjectURL()方法來釋放豺型。瀏覽器會在文檔退出的時(shí)候自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況买乃，你應(yīng)該在安全的時(shí)機(jī)主動釋放掉它們触创。
?
三、利用a標(biāo)簽自定義文件名
const link = document.createElement('a'); // 生成一個(gè)a標(biāo)簽为牍。
link.href = window.URL.createObjectURL(blob); // href屬性指定下載鏈接
link.download = fileName; // dowload屬性指定文件名
link.click(); // click()事件觸發(fā)下載
download 屬性設(shè)置文件名時(shí)哼绑，可以直接設(shè)置擴(kuò)展名碉咆。如果沒有設(shè)置抖韩，則瀏覽器將自動檢測正確的文件擴(kuò)展名并添加到文件 。
四：主要完整代碼
-
普通下載
axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { // 創(chuàng)建Blob對象疫铜，設(shè)置文件類型 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) let objectUrl = URL.createObjectURL(blob) // 創(chuàng)建URL location.href = objectUrl; URL.revokeObjectURL(objectUrl); // 釋放內(nèi)存 }) -
自定義下載后的文件名
// 利用a標(biāo)簽自定義下載文件名 const link = document.createElement('a') axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { // 創(chuàng)建Blob對象茂浮，設(shè)置文件類型 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}) let objectUrl = URL.createObjectURL(blob) // 創(chuàng)建URL link.href = objectUrl link.download = 'xxx' // 自定義文件名 link.click() // 下載文件 URL.revokeObjectURL(objectUrl); // 釋放內(nèi)存 })注 ：下載指定擴(kuò)展名的文件只需要對照MIME 參考手冊設(shè)置type即可。
?
方法二：使用 js-file-download
-
安裝
npm install js-file-download --save -
使用
import fileDownload from 'js-file-download' axios.post(postUrl, params, {responseType: 'arraybuffer'}).then(res => { fileDownload(res.data, 'xxx.xls') })
