前端下载文件&兼容IE

之前做的下载文件并兼容IE,当时搜了好几篇博客,才写出来。现在拿出来分享下,希望能够直接帮到大家,欢迎指正问题~

    let param = {
      projectId,
    }
    let url = '/xxx/xxx';
    axios.post(url,param,{responseType: 'blob'})
      .then((response) => {
        let res = response.data;
        if (res["content-type"] && res["content-type"].indexOf('application/json') !== -1) {
          let reader = new FileReader();
          reader.readAsText(res, 'utf-8');
          reader.onload = function (e) {
            let data = JSON.parse(reader.result);   //e.target.result也可
            if(data.msg){
              message.error(data.msg);
            }           
          }
        }else{
          let blob = new Blob([response.data])
          let downloadElement = document.createElement('a');
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          let fileName = response.headers["content-disposition"].split(";")[1].split("filename=")[1];
          if (isIE) {
            window.navigator.msSaveBlob(blob, fileName);
          } else {
            downloadElement.href = href;
          downloadElement.download = fileName; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象 
          }
        }
      })
      .catch((err) => {
        console.error(err)
      });

你可能感兴趣的:(前端,react.js,javascript)