js 前端接受后台传过来的文件流

有的时候，由于服务器文件不是开放的，所以可能会需要前端用ajax传一段加密信息才能下载，而且返回的是文件流，不能直接用location.href或a标签直接下载，这时候我们怎么办呢？

情况一：验证信息是在header

//http.js
import Vue from "vue";
import axios from "axios";
//定义获取文件流函数
export function downLoad(obj) {
  return axios.get(paramsData.url, {
    params: paramsData.dat,
    baseURL: "/foo",
    headers: {
      "busi-sign": paramsData.token
    },
    responseType: "arraybuffer"
  });
}


//调用
import { downLoad } from "@/utils/http";

clickDownload(){
 let data = {
        fileKey: 'fileKey',
        time: (new Date()).getTime()
      };
 let paramsData= {
          
          url: "/file/downloadFile",
          token: token,
          dat: data
        };

downLoad(paramsData).then(response => {
         //获取文件名称与文件类型
          const filename = response.headers["file-name"];
          const contentType = response.headers["content-type"];
        //创建a标签
          let linkElement = document.createElement("a");
        //创建 blob对象 第一个参数 response.data是代表后端返回的文件流  ，第二个参数设置文件类型
          let  blob = new Blob([response.data], {
            type: contentType
          });
        //生成生成下载链接  这个链接放在a标签上是直接下载，放在img上可以直接显示图片问价，视频同理
          const url = window.URL.createObjectURL(blob);
           
          let linkElement = document.createElement("a");
          linkElement.setAttribute("href", url);
          linkElement.setAttribute("target", '_blank');
          linkElement.setAttribute("download", filename);
        //模拟点击a标签
          if (typeof MouseEvent == "function") {
            var event = new MouseEvent("click", {
              view: window,
              bubbles: true,
              cancelable: false
            });
            linkElement.dispatchEvent(event);
          }  
        })

}

情况二：验证信息在url上的，则直接生成url就可以了

async fileDownload(params){
        //获取授权码函数
       const res = await getAuthCode(params)
       if(res.code == 0){
         this.authCode=res.data
      }
      let url =  `http://testDownload.com/file?fileKey=${fileKey}&authCode=${authCode}`;
      let linkElement = document.createElement("a");
      linkElement.setAttribute("href", url);
      linkElement.setAttribute("target", '_blank');
      if (typeof MouseEvent == "function") {
        let event = new MouseEvent("click", {
         view: window,
         bubbles: true,
         cancelable: false
          });
       linkElement.dispatchEvent(event);
      }else if (navigator.appVersion.toString().indexOf(".NET") > 0) {
                //如果具备msSaveBlob函数  则直接使用msSaveBlob函数直接保存文件
            window.navigator.msSaveBlob(blob, filename);
      } 
    },

至此完成，如果对你有帮助，请点个双击么么哒！

如有不解，请加群897149839