前端接受后端 blob 文件流 并进行展示和下载

请求
这里的 responseType看网上很多种，但是我的这里就是用这个才可以展示成功的，如果这种类型不行，就多试试。

// 预览成果物文件
export const PreviewFile=(data)=>{
  return request({
    url:"/FileHandle/PreviewFile",
    method:"post",
    responseType: 'arraybuffer',
    data
  })
}

我这里用了responseType: 'arraybuffer’后 可以看见返回在控制台的为一些二进制数据

接收文件流并转成url格式
我们后端返回在控制台的preview东西如下图所示，应该是二进制但是乱码了，不过不影响

接下来就是前端接收此数据并进行处理：

//res为接口所返回的文件流
var blob = new Blob([res], {
     type: "application/pdf;chartset=UTF-8"
 });
 //var url = window.URL.createObjectURL(blob);
 //新窗口打开
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.target = "_blank";
link.click();

链接类似于blob:http://localhost:8080/d466bf6c-4a02-4892-8c77-fb1533c33c0f
然后就可以直接使用了。

我们的下载也是接收文件流 但是下载的是原文件 所以
接口有点不同
下载的接口是blob类型 如下图

可能是因为数据类型不一样

下载代码

      let data = {
        fileGUIDName: this.dowloadFile.file_guid_name
      };
      DownFile(data).then(res => {
        console.log("这是下载的接口res", res);
        var blob = new Blob([res], {
          type: "application/octet-stream;chartset=UTF-8"
        });
        console.log("这是blob", blob);
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement("a");
        a.href = url;
        //文件名
        a.download = this.dowloadFile.file_name;
        a.click();
        //浏览器会直接下载pdf 和 doc 或docx 这里我们公司没做excel等文件的上传预览和下载，所以如果是其他文件应该接口和返回都有点区别。
      });