后端返回文件流,接收传回来的response.data,使用URL.createObjectURL方法转化成blobURL,放入a标签中模拟点击下载后,没反应,打断点发现a.click()返回undefined,一开始还以为是blobURL不对,检查了好几天,感觉代码也没写错,结果发现,可能是之前封装的调接口的请求把后台传来的流blob对象字符串化了,所以点击不能下载,重新写一个原生请求,就可以下载了。
原文链接

附上我的代码:

function exportLogData(data, file_name) {
  axios({
    method: 'post',
    url: serverIp + '/sysLog/download',
    responseType: 'blob',
    data,
    headers: { 'Access-Control-Allow-origin': '*', 'Content-Type': 'application/json; charset=UTF-8', 'Token':JSON.stringify(getToken())}
  }).then((res) => {
    if (res && res.status === 200) {
      const blob = new Blob([res.data])
      let brower = '';
      if (navigator.userAgent.indexOf('Edge') > -1){
        brower = 'Edge'
      }
      if ('download' in document.createElement('a')){
        if (brower === 'Edge') {
          navigator.msSaveBlob(blob, file_name);
          return
        }
        let url = window.URL.createObjectURL(res.data);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', file_name);
        if(!document.getElementById(file_name)) {
          document.body.appendChild(link);
        }
        link.click();
        URL.revokeObjectURL(link.herf);
        document.body.removeChild(link)
      } else {
        //IE10+下载
        navigator.msSaveBlob(blob, file_name)
      }
    }
  }).catch(error => {
    console.log(error)
  })
}
Logo

前往低代码交流专区

更多推荐