前端下载二进制流文件

 前端下载文件有两种方法，第一种：后台直接返回下载流格式的文件地址，前端用a标签新开窗口或者window.open()下载即可；另外一种：后台返回二进制流文件内容，前端通过blob进行转化后再下载。

 具体代码：

async downloadFn() {
      this.loading = true;
      let res = await defenseUserAgreementGet(this.userId);
      this.loading = false;
      const data = res.data;
      const url = window.URL.createObjectURL(
        new Blob([data], {
          type:
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        })
      );
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "实时防务用户使用协议.pdf");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },

 下载完后打开发现文件已损坏：

原来由于后台返回的是二进制数据，所以前台必须设置responseType: “arraybuffer”，这样下载的文件才不会损坏或者出现乱码问题。

 后端返回数据：

完整代码：

async downloadFn() {
      this.loading = true;
      let res = await defenseUserAgreementGet(this.userId, {
        responseType: "arraybuffer" // 后端返回二进制流文件，这里需要设置下返回数据类型，不然下载打开后会乱码
      });
      this.loading = false;
      const data = res.data;
      const url = window.URL.createObjectURL(
        new Blob([data], {
          type:
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        })
      );
      const link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "实时防务用户使用协议.pdf");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },