关于js调用接口处理二进制流数据并实现文件下载

关于js调用接口处理二进制流数据下载文件

调用后台接口得到的是二进制流数据，而不是通过url直接使用XMLHttpRequest，XMLHttpRequest有可能会造成跨域，所以处理二进制流更为稳妥。

    //文件下载函数，自定义文件名称
    downFile(id, fileName) {
      postdownloadFile(id)//postdownloadFile为根据文件id返回对应文件二进制流的接口，id为文件id
        .then((res) => {
          this.$Message.success('操作成功');
          let blob = new Blob([res]); // 这里可以为blob设置文件类型，以type：的格式，此处没设置
          let url = window.URL.createObjectURL(blob); // 创建一个临时的url指向blob对象
          let a = document.createElement('a');//创建一个a标签
          a.href = url;//将a标签的href赋值为url
          a.download = fileName;//更改文件名为传来的fileName
          a.click();//点击a标签
          // 释放这个临时的对象url
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          // 接口请求失败时，错误提示信息可在此处弹出
          this.$Message.error('接口请求失败');
          console.log('🚀 ~ 接口请求失败==:>', error);
        });
    },