vue请求直接下载文件

直接上方法了,引入即可!

export function exportSales(url, filename, token) {
  function createObjectURL(object) {
    return window.URL
      ? window.URL.createObjectURL(object)
      : window.webkitURL.createObjectURL(object);
  }
  var xhr = new XMLHttpRequest();
  var formData = new FormData();
  xhr.open("get", url); //url填写后台的接口地址,如果是post,在formData append参数(参考原文地址)
  xhr.setRequestHeader("User-Token", token);
  xhr.responseType = "blob";
  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = this.response;
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var a = document.createElement("a");
        var url = createObjectURL(blob);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
      }
    }
  };
  xhr.send(formData);
}

二、vue封装的方法

由于封装的方法,这样下载没有code 返回,所以需要自行处理下逻辑,我的参考

image.png

请求的js

export function exportlog(params) { //客户端日志list
    return request({
        url: '/tax/task/log/export',
        method: 'get',
        responseType: 'blob', // 核心,需要转成blob
        params
    })
}

页面内处理

         exportlog(this.listQuery).then((res) => {
  

       const imgURL = [(URL || webkitURL).createObjectURL(res)]
       // 直接下载  window.open(imgURL )
      
      // 知道下载文件名
        const a = document.createElement('a') //创建a标签
        a.style.display = 'none'
        a.href = imgURL // 指定下载链接
        let title = '报税助手申报记录' //指定下载文件名
        if (this.listQuery.startTime) {
          title += this.listQuery.startTime + '-' + this.listQuery.endTime
        }
        a.download = title
        a.click() //触发下载
        URL.revokeObjectURL(a.href) //释放URL对象
        
        })


相关内容

发表评论

验证码:
点击我更换图片

最新评论