admin管理员组

文章数量:1530243

今天碰到用户使用后台点击下载无效问题，通过其他浏览器测试其实是没问题的，但是根据用户反馈他使用的是IE浏览器，所以本人测试了使用<a>标签在IE下触发下载可能保存时会直接将文件命名成download，并且还没有文件后缀，所以用户可能会不知道你下载的是什么。

其实写过好几个后台的下载都是要么使用 <a> download 属性或window.open实现下载效果，使用这两个方法除IE浏览器外，应该大部分浏览器都可以实现下载效果的。

例如：

//下载
function downloadFile(row){
    var link = document.createElement('a');
    link.setAttribute("download", row.fileName);
    link.href = '/download?id=' + row.id;
    link.click();
}
//下载
function downloadFile(row){
    window.open('/download?id=' + row.id);
}

最后还是要根据用户反馈来进行修改下载功能，在网上百度了下大佬的解决方案，改成这种写法就能在IE下实现下载并可以把文件生成对应名称和后缀。

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

注：下载请求的链接是后台将文件已流的格式返回给前端

本文标签： 不兼容浏览器标签

版权声明：本文标题：a标签下载在IE浏览器不兼容问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726424800a1070248.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。