ie 文件下载问题

最新推荐文章于 2023-03-29 15:47:52 发布

原创最新推荐文章于 2023-03-29 15:47:52 发布 · 440 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种解决IE浏览器中使用A标签download属性时，文件不能直接下载而是在线打开的问题的方法。通过检测浏览器类型并采用不同的技术手段，确保文件能够正确地下载到本地。

问题

使用a标签download，在ie下会在网页直接打开，无法下载到本地。

解决

	//文件地址
	var url = '../file/test.xlsx';
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true); 
    xhr.responseType = "blob"; // 返回类型blob
    // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
    xhr.onload = function() {
      // 请求完成
       if(this.status === 200) {
        // 返回200
        var blob = this.response;
        var href = window.URL.createObjectURL(blob); //创建下载的链接
		//判断是否是IE浏览器，是的话返回true
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, 'test.xlsx')
          } catch (e) {
            console.log(e);
          }
        } else {
          // 其他浏览器 创建a标签 添加download属性下载
          var downloadElement = document.createElement('a');
          downloadElement.href = href;
          downloadElement.target = '_blank';
          downloadElement.download = 'test.xlsx'; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }
      }
    }
    // 发送ajax请求
    xhr.send()

ie 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。
msSaveBlob 和 msSaveOrOpenBlob 之间的区别就在于前者仅为用户提供“保存”按钮，而后者不但提供“保存”按钮，还提供“打开”按钮。