前端下载——处理后端返回的二进制文件（乱码）

在开发的过程中遇到了一个下载的问题，折腾了挺久的，分享一下解决方式。
首先，之前写过一次下载的，那个返回的是文件流，返回的内容就是文件内容，解决方法写在这篇博客里
前端下载文件（文件流转文件）
然后这里，后端返回的不是文件流，而是byte字节。

一、返回byte字节进行下载

postman点击send发送请求之后返回是这样的：

一开始尝试转成blob然后进行下载，但是都没有成功。
这里参考了这几篇文章感觉还不错，分享一下
前端下载图片
实现文件下载，将后台返回的字节流转成下载链接
前台使用blob处理文件流并下载
看完试完之后下载下来的图片还是打开不支持查看。
又经过漫长的试错与研究，终于发现自己的问题了，
在和后台交互的时候，如果后台返回给我们的是二进制流数据，我们就要在发送的时候加上{responseType:‘blob’}或者是{responseType: ‘arraybuffer’},这行代码，这样返回给我们的就不是乱码了
经过尝试，终于成功了，代码如下

const params = {
   bucketId: this.currentId,
   objectId: this.ObjectDetail.id,
   objectName: this.downloadName + '.' + this.ObjectDetail.objectType.toLowerCase(),
 }
 let url = `/octopus/object/download?bucketId=${params.bucketId}&objectId=${params.objectId}&objectName=${params.objectName}`
 axios.get(url,{responseType:'blob'}).then(msg=>{
   // console.log(msg.data) //打印出来是blob对象，已经不是乱码了
   let url = window.URL.createObjectURL(msg.data); //表示一个指定的file对象或Blob对象
   // console.log(url,"看一下这是啥")
   let a = document.createElement("a"); 
   document.body.appendChild(a);
   let fileName=msg.headers["content-disposition"].split(";")[1].split("=")[1];  //filename名称从后端返回的headers截取
   // let fileName = params.objectName // 这里也可以这样获取到文件名
   a.href = url;
   a.download = fileName; //命名下载名称
   a.click(); //点击触发下载  
   window.URL.revokeObjectURL(url);  //下载完成进行释放
 })

这里截图看一下调取下载接口的时候后端返回的headers

我的代码的实现方式的参考文章可以查看：
前端下载二进制流文件
前端处理后台传过来的二进制流进行下载，并处理乱码（基本参考这篇文章）

==【补充】：==使用{responseType: ‘arraybuffer’}下载图片可以看这篇文章，responseType的灵感也是来自这两篇文章。
获取图片返回二进制乱码采坑记录
前端处理后台返回二进制流乱码图片
这个时候，图片已经可以正常下载及打开查看了。
使用arraybuffer的代码

let url = `/octopus/object/download?bucketId=${params.bucketId}&objectId=${params.objectId}&objectName=${params.objectName}`
axios.get(url,{responseType: 'arraybuffer'}).then(msg=>{
    console.log(msg.data) //打印出来是blob对象，已经不是乱码了
    let blob = new Blob([msg.data], {type: 'application/octet-stream'})
    let url = window.URL.createObjectURL(blob)
    // let url = window.URL.createObjectURL(msg.data); //表示一个指定的file对象或Blob对象
    console.log(url,"看一下这是啥")
    let a = document.createElement("a"); 
    document.body.appendChild(a);
    let fileName=msg.headers["content-disposition"].split(";")[1].split("=")[1];  //filename名称从后端返回的headers截取
    // let fileName = params.objectName // 这里也可以这样获取到文件名
    a.href = url;
    a.download = fileName; //命名下载名称
    a.click(); //点击触发下载  
    window.URL.revokeObjectURL(url);  //下载完成进行释放
 })

二、返回base64进行图片的预览和下载下载

这里再补充两个小知识，是在研究这个下载的时候学到的，
查看我的这篇文章吧，要不这篇文章里东西太多，太杂乱了
图片预览与下载