js通过get请求二进制流接口下载文件，且带token验证

jquery 解析 blob 二进制流 导出 下载 excel 接口

下载：jquery-ajax-blob-arraybuffer

情景：当我们请求接口返回来的是一堆二进制流乱码，例如：（相当于我们用记事本方式去打开文件一样，其实文件是有的）

像这样的调用接口下载文件，请求方式必须是get。

如何下载：

1，get请求不到任何token

<a href="http://localhost:3000/upload/api" download="xxx">下载11</a>   //href换成自己接口，下载后是xxx.gif

2，post请求不带token

exportExcel() { //导出
    this.exportDisabled = true;
    var url = basePath + '/act/excel/data/ranking';
    var exportForm = $("<form action=" + url + " method='post'></form>")
    exportForm.append("<input type='hidden' name='roomNumber' value='" + this.queryData.roomNumber + "'/>")
    exportForm.append("<input type='hidden' name='type' value='" + this.queryData.type + "'/>")
    $(document.body).append(exportForm);
    exportForm.submit();
    exportForm.remove();
    this.exportDisabled = false;
},

3，通过base64下载 带token

如果要带token验证才能下载就使用以下方法：（思路：二进制流   转  blob  转 base64 ）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://greasyfork.org/scripts/20389-jquery-ajax-blob-arraybuffer/code/jquery-ajax-blob-arraybuffer.js"></script>

$.ajax({
  type:'get',
  url:`${process.env.VUE_APP_BASE_API}/wucg/cms/downloadStudent`,
  headers:{
    "userToken":store.getters.token,
    "Content-Type":"application/json"
  },
  dataType: "blob",  //jquery 没有解析blob类型要进入 jquery-ajax-blob-arraybuffer.js
  success(data){
        var blob = data;
        var reader = new FileReader();
        reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
        reader.onload = function (e) {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement('a');
          a.href = e.target.result;

          self.$nextTick(function() {
            $('#dowBtn').html(  $(a).text('导出')  )
          })
        }
  },
})

或者  通过blob下载 带token

//下载
downloadFile(fileName,blob) {
  let aLink = document.createElement('a');
  var blob = blob; //new Blob([content]);

  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);

  // aLink.dispatchEvent(evt);
  //aLink.click()
  aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
},

//获取导出战队blob
exportTeam(){

  var self =this
  console.log(self.seachData)
  // return
  this.$axios({
    method: 'post',
    url: `${process.env.VUE_APP_BASE_API}/wucg/cms/downloadTeamList`,
    headers: {
      'Content-Type': 'application/json',
      "userToken":store.getters.token
    },
    data: {
      matchId:self.seachData.matchId,
      division:self.seachData.division,
      cityCodes:self.seachData.cityCodes,
      schoolCodes:self.seachData.schoolCodes,
      teamName:self.seachData.teamName,
      gameId:self.seachData.gameId,
      teamStatus:self.seachData.teamStatus
    },
    responseType: 'blob'
  }).then((res)=>{
    var blob = res.data;
    var filName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('\'\'')[1])
    self.downloadFile(filName || '战队列表.xls',blob)  //直接通过blob数据下载
  })
},

//base64转blob
base64ToBlob(code) {
  let parts = code.split(';base64,');
  let contentType = parts[0].split(':')[1];
  let raw = window.atob(parts[1]);
  let rawLength = raw.length;

  let uInt8Array = new Uint8Array(rawLength);

  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], {type: contentType});
},

参考：https://www.jb51.net/article/88972.htm

———————–以下是原生写法———————————–

后台直接提供下载接口，直接用a标签请求接口即可。但是考虑安全，在用get请求下载的同时要带上token验证。

代码经过实践可行：

var xhh = new XMLHttpRequest();
xhh.open("get", `${process.env.VUE_APP_BASE_API}/wucg/cms/downloadStudent` );  //请求地址
xhh.setRequestHeader("Authorization", "Bearer "+token);  //token设置
xhh.setRequestHeader("Content-Type","application/json");
xhh.responseType = 'blob';
// xhh.onreadystatechange = function () {
//     if (xhh.readyState === 4 && xhh.status === 200) {
//         var mimeType = xhh.getResponseHeader("ajax-mimeType");
//         var blob = new Blob([xhh.response], {type: mimeType});
//         var csvUrl = URL.createObjectURL(blob);
//         var link = document.createElement('a');
//         document.body.appendChild(link); //创建的标签添加到body，解决Firefox下无法打开页面的问题
//         link.href = csvUrl;
//         link.target = '_blank';
//         link.id = 'linkId',
//         link.className = 'linkId',
//         link.download = fileName;
//         document.getElementById("linkId").click();
//         // link.remove(); //将a标签移除
//         $('.linkId').remove()
//     }
// };
xhh.onload = function () {
  // 请求完成
  if (this.status === 200) {
    // 返回200
    var blob = this.response;
    var reader = new FileReader();
    reader.readAsDataURL(blob);    // 转换为base64，可以直接放入a表情href
    reader.onload = function (e) {
      // 转换完成，创建一个a标签用于下载
      var a = document.createElement('a');
      a.href = e.target.result;

      self.$nextTick(function() {
        $('#dowBtn').html(  $(a).text('导出')  )
      })
    }
  }
};
xhh.send();

要想实现，点击链接有另存为效果参看：https://sdeno.com/?p=7553