情景提示:
请求后台接口。
后台返回二进制流。
前端实现浏览器自动下载成exlce文件。
项目框架Vue。
主要知识点:Blob对象。h5新特性 download

/*
*封装函数 downLoadFile.js
*params:  
*data:二进制文件
*/
exports.install = function (Vue, options){
  Vue.prototype.downloadFile =function(data){
    if (!data) {
      return
    }
    let url = window.URL.createObjectURL(new Blob([data]))
    let link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    link.setAttribute('download', 'excel1111.xlsx')
    document.body.appendChild(link)
    link.click()
   };
}
//---发送请求 获取二进制流
this.$http.post(this.baseUrl+"/api/v1/statistic/export/event/817BA83027DA43F491486829E668DBEC",
          {
            startTime:time[0],
            endTime:time[1]
          },
            //--headers和responseType一定要在一起设置,否则会导致 获取到的二进制文件流 格式不正确
          {
            headers: {                                       
              'content-type': 'application/json; charset=utf-8',
              'token':sessionStorage.getItem("tokens"),
            },
            responseType: 'blob'      //--设置请求数据格式
          })
          .then((res)=>{
//            console.log(res);
            this.downloadFile(res.data);  //---调用函数
          }).catch((erro)=>{
            console.log("erro-----",erro);
        })
Logo

前往低代码交流专区

更多推荐