前后端分离项目利用Blob下载文件中文乱码的解决办法

前后端分离项目一般是通过输入输出流来进行文件传输的，也就是利用文件流来实现端到端的文件下载功能。
因为有的文件可能含有中文，因此在文件传输过程中会涉及到编码问题。后台的代码需要将输出流的编码格式设置为UTF-8。

 response.setContentType("application/octet-stream;charset=UTF-8");

另一种方式就是：（优先级最高）

 response.setCharacterEncoding("UTF-8"); // 设置文件流编码格式 不然中文会乱码

前端接收到输出流的时候是以Blob类型接收的，

     downloadFileByIndex(index).then(res => {
        console.log(res.data instanceof Blob) //true
     } //此时Blob的type是application/octet-stream

这样接收到的二进制数据中文是已经乱码了，我们需要修改二进制的部分内容，给内容前加上'\uFEFF'。
具体前端代码如下：

const testBlob = res.data.slice(0)
        const reader = new FileReader()
        reader.readAsText(testBlob, 'utf-8')
        reader.onload = function (evt) {
          console.log(evt)
          const url = window.URL.createObjectURL(new Blob(['\uFEFF' + evt.target.result], {type: 'text/plain;charset=utf-8'}))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', `${fileName}`)
          document.body.appendChild(link)
          link.click()
        }