解決二進制文件下載亂碼問題
好久沒寫博客了，突然想記錄點什么。
前段時間遇到一個問題，記錄一下，以后遇到可以找到解決方案。
事情的原由是這樣的，后端返回一個二進制的csv文件讓前端進行下載，前端采用axios，responseType為blob進行下載，看到這里，其實整個文件就已經下載完成了，以為萬事大吉，其實不然。
打開文件一看，居然有亂碼，這就讓我摸不著頭腦了。
貼一下偽代碼：
1 axios.request({ data: data, method: 'POST', url: url, responseType: 'blob'}).then(res => { 2 var data = res.data 3 var blob = new Blob([data]) 4 var href = window.URL.createObjectURL(blob) 5 var a = document.createElement('a') 6 a.href = href 7 a.setAttribute('download', 'xxx.csv') 8 a.click() 9 window.URL.revokeObjectURL(href) 10 })
下載代碼其實沒上面問題，就是不知道為什么下載下來中文會是亂碼。
其實解決辦法也很簡單，在網上找到的，那就是在使用blob讀取內容時，需要加上'\ufeff'，使文件以utf-8的編碼模式，同時解決中文亂碼問題。
就是這么神奇，貼一下修改之后的代碼：
axios.request({ data: data, method: 'POST', url: url, responseType: 'blob'}).then(res => {
var data = res.data
var blob = new Blob(['\ufeff', data])
var href = window.URL.createObjectURL(blob)
var a = document.createElement('a')
a.href = href
a.setAttribute('download', 'xxx.csv')
a.click()
window.URL.revokeObjectURL(href)
})
好了，以上就是本次問題的解決方案，我想，以后凡是涉及到文件下載的，都可以采用這個方法以確保下載文件的正確性吧。
浙公網安備 33010602011771號