Vue.js是當前前端開發中最熱門的框架之一,它的數據綁定和組件化的思想深受開發者的喜歡。而axios是Vue.js中最常用的網絡請求庫之一,它比傳統的XMLHttpRequest更強大和簡潔。但是,使用axios發送文件下載請求,可能會遇到文件名亂碼的問題。本文將介紹如何使用axios進行文件下載,并解決文件名亂碼的問題。
在Vue.js中使用axios下載文件非常簡單,只需要使用瀏覽器的download
屬性即可。
axios({
url: '/download',
method: 'GET',
responseType: 'blob'
}).then(res => {
const fileName = res.headers['content-disposition'].split('=')[1];
const aLink = document.createElement('a');
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});
aLink.download = decodeURIComponent(fileName);
aLink.href = URL.createObjectURL(blob);
aLink.click();
})
上述代碼中,我們先將responseType
設置為blob
,然后獲取到下載的文件名fileName
,使用createElement
創建一個鏈接aLink
,使用Blob
對象生成下載的二進制文件,將文件名解碼并設置到aLink
的download
屬性中,最后使用URL.createObjectURL
生成一個文件URL,模擬點擊aLink
,即可開始下載。如果下載的文件是word文檔,則將type設置為application/vnd.openxmlformats-officedocument.wordprocessingml.document
,注意替換成自己下載的文件類型。
如果下載的文件名出現亂碼,可以使用decodeURIComponent
對文件名進行解碼,這樣就能正確的顯示中文文件名了。
總結一下,axios可以非常方便地進行文件下載,只需要設置一下responseType,并使用URL.createObjectURL生成一個文件URL即可。如果文件名出現亂碼,則需要使用decodeURIComponent
進行解碼。