兼容ie的下载方法_csdn ie下载-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45366905/article/details/119650670

博客讲述了在开发过程中遇到的Chrome下载文件方法在IE上不兼容的问题，以及如何通过navigator.msSaveBlob()方法解决IE10及以上版本的下载问题。提供了一段JavaScript代码示例，展示了在不同浏览器环境下实现文件下载的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兼容ie的下载方法

在平时开发用的是谷歌浏览器，突然要兼容ie10以上，这时候我发现我原来的处理下载文件的方法在ie报错了。报错信息如下：
在这里插入图片描述
折腾了一下午，最后发现是我草率了。

navigator.msSaveBlob()方法将文件或Blob保存到磁盘。此方法的行为方式与navigator.msSaveOrOpenBlob（）相同，只是禁用了文件打开选项。

直接在我的下载方法后加入判断，优先使用此方法即可解决ie报错的问题了

具体代码如下：


exportFile(url, method = "get", params = {}, data) {

    return new Promise((resolve, reject) => {
      service({
        url: url,
        method: method,
        params: params,
        data: data,
        responseType: "blob",
        headers: {
          'Content-Type': 'application/json'
        },
      })
        .then(res => {
          resolve();
          if (res) {
            console.log(res);
            let fileName = res.headers['content-disposition'];
            let name = decodeURI(
              fileName
                .split("=")[1]
                .replace('"', "")
                .split(".")[0]
            );
            let format = decodeURI(
              fileName
                .split("=")[1]
                .replace('"', "")
                .split(".")[1]
                .replace('"', "")
            );
            var blob = res.data;
            // 兼容ie
            if (window.navigator.msSaveBlob) {
              try {
                window.navigator.msSaveBlob(blob, name + '.' + format)
              } catch (e) {
                console.log(e);
              }
            } else {
              // 其他浏览器，创建一个a链接点击下载
              var reader = new FileReader();
              reader.readAsDataURL(blob);
              reader.onload = function (e) {
                var a = document.createElement("a");
                a.download = name + '.' + format;
                a.href = e.target.result;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
              };
            }
          } else {
            reject();
          }
        })
        .catch(err => {
          reject(err);
        })
    })
  }