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

一、返回byte字节进行下载

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

java后端进度返回给前端 后端返回文件给前端_vue.js

一开始尝试转成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

java后端进度返回给前端 后端返回文件给前端_二进制流_02

我的代码的实现方式的参考文章可以查看：

前端下载二进制流文件前端处理后台传过来的二进制流进行下载，并处理乱码（基本参考这篇文章）

==【补充】：==使用{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进行图片的预览和下载下载

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