前端模拟实现postman的send-and-download进行文件下载

今天在合后端做需求的时候，后端返文件流的形式前端解析并下载

• 后端接口返回文件流,使用postman的send and download可以直接将文件下载

主要参考第二种

1.刚开始的时候是这种下载

后端返URL前端直接进行下载，创建a标签并下载

exportArcelAttachment({..._this.args.search}).then(function (res){
      let ulrs = res.data  //这块返的直接是个URL链接
      let link = document.createElement('a')
      link.style.display = "none"
      link.href = ulrs
      link.setAttribute('download', 'product.xls')
      document.body.appendChild(link)
      link.click()
  })

2.后来改成现在的下载模式了

注意这块在请求的时候加上请求头responseType : 'blob',

export const exportSupplement = (params) => { //批量导出
    return axios.request({
        url: '/logistics-engine/arcelreconciliation/exportSupplement',
        responseType : 'blob', //重要
        method: 'post',
        data: {
            args: JSON.stringify(params)
        }
    })
}

exportSupplement({..._this.args}).then(function (res) { //导出流
   console.log(res,'导出')
   let blob = new Blob([res.data]);//response.data为后端传的流文件
   let downloadFilename = '小包对账数据'+ _this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')+ ".xlsx";//设置导出的文件名  用moment时间插件对文件命名防止每次都是一样的文件名
   if (window.navigator && window.navigator.msSaveOrOpenBlob) {
   //兼容ie浏览器
       window.navigator.msSaveOrOpenBlob(blob, downloadFilename)
   }else {
   //谷歌,火狐等浏览器
       let url = window.URL.createObjectURL(blob);
       let downloadElement = document.createElement("a");
       downloadElement.style.display = "none";
       downloadElement.href = url;
       downloadElement.download = downloadFilename;
       document.body.appendChild(downloadElement);
       downloadElement.click();
       document.body.removeChild(downloadElement);
       window.URL.revokeObjectURL(url);
   }
   _this.$Message.success('导出成功！')
   }).catch(function (err) {
      console.log(err)
  }).finally(function () {
      _this.tableLoading = false;
  })