解决二进制文件下载乱码问题

好久没写博客了，突然想记录点什么。

前段时间遇到一个问题，记录一下，以后遇到可以找到解决方案。

事情的原由是这样的，后端返回一个二进制的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)
 })

好了，以上就是本次问题的解决方案，我想，以后凡是涉及到文件下载的，都可以采用这个方法以确保下载文件的正确性吧。