使用blob下载文件 以及解决打开时是object

首先封装接口时可以规范返回的格式

{
      responseType: "blob",
}

这样返回的格式就是blob对象了

然后就是下载的流程了 ：前端发送请求给后台 后台返回文件流 ，我们拿到文件流之后转换为blob对象 然后创建a标签 获取url 创建点击事件 利用a标签的herf进行下载

里面还有两个注意点 这个后面再说 好了 废话不多说 上代码

      const result = await apiFilesDownload(params);
      console.log(result.data);
      //获取文件名
      const filesNameCode = result.headers["content-disposition"]
        .split(";")[1]
        .split("=")[1];
      //解密文件名称
      const fileName = decodeURI(filesNameCode);
      const a = document.createElement("a");
      const res = result.data;
      //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
      const blob = new Blob([res], {
        type: ".xlsx", //vnd.openxmlformats-officedocument.spreadsheetml.sheet
      });
      a.style.display = "none";
      const url = window.URL || window.webkitURL || window.moxURL;
      a.href = url.createObjectURL(blob);
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(url);
      this.downloadHDvisible = false;

注意点：

首先是获取文件名，我这里我的后台是通过请求头把文件名返回给我了  可能各公司不一样 但是如果是这种流做法的一般需要这种方法获取 一开始我死活获取不到文件名 卡了好几天 后来这个东西第一阶段测试不会测 所以搁置了几天 直到昨天才跟我的后台联调

好了重点来了 这个是需要你的后台把这个暴露出来 不然你是获取不到的 需要他加上两行代码

后端配置：

  response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
  response.setHeader("Content-Disposition", ...)

  这样前端才可以能拿到文件名

然而这个刚解决 下一个就来了 文件名是乱码 这就需要这句代码了

 const fileName = decodeURI(filesNameCode);

使用decodeURL解析就可以了

然而然而事情并没有结束。。。。

一切问题解决完之后 下载下来的文件打开又变成了【object，object】

这个问题是因为我后台返回给我的是一个文件流，就是一串乱码，我还不能直接取这个乱码，比如这样：

const result = await apiFilesDownload(params);

你还得这样：

const res = result.data;

之后用blob取解析这个res才行

到这里就成功了，第一次做做个记录，希望能帮到各位。