/** * 下載文件調用 * @param 接口返回數據 文件名 */
export function downloadFile(res, fileName) {
if (!res) {
return
}
if (window.navigator.msSaveBlob) { // IE以及IE內核的瀏覽器
try {
window.navigator.msSaveBlob(res, fileName) // res為接口返回數據，這里請求的時候已經處理了，如果沒處理需要在此之前自行處理var data = new Blob([res.data]) 注意這里需要是數組形式的,fileName就是下載之后的文件名
// window.navigator.msSaveOrOpenBlob(res, fileName); //此方法類似上面的方法，區別可自行百度
} catch (e) {
console.log(e)
}
} else {
let url = window.URL.createObjectURL(new Blob([res]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)// 文件名
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下載完成移除元素
window.URL.revokeObjectURL(url) // 釋放掉blob對象
}
}
頁面調用 調用時傳入后端返回的res和文件名
下載文件的具體步驟（以谷歌瀏覽器為例）
- 點擊下載按鈕，請求后台接口，獲取后台傳輸過來的數據data
- axios中有個方法可以把文件流對象轉blob
- 根據window.URL.createObjectURL方法生成一個鏈接
- 創建一個a標簽元素
- 設置屬性，a.download = '你的文件名字'，a.href = '剛剛生成的URL'
- 使這個標簽觸發點擊事件
- 移除元素