a标签下载文件不兼容IE问题解决

2,384 阅读1分钟

最近写项目遇到一个问题,下载文件的时候如果使用a标签的download属性,在IE浏览器不兼容,同时会打开一个新窗口,翻了一些博客,找到了解决方法,记录一下,以下为笔记

function downFile(fileId,fileName,fileType) {
    download(fileName + "." + fileType,
    encodeURI(encodeURI('<%=request.getAttribute("file_url")%>/file/downFileResource?id='+ fileId + '&name=' + fileName + '&suffix='+ fileType)));
}
function download(name, href) {
    if (window.navigator.msSaveBlob) {  //此方法支持 IE10+ 
        var blobs = new Blob([href],{type:'text/plain'});//创建一个blob对象
        try {
            window.navigator.msSaveBlob(blobs,name); //此时为文件地址,如果返回二进制流要使用var url = new URL.createObjectURL(blobs);
        } catch (e) {
            console.log(e);
        }
    } else {   //其他浏览器使用a标签来进行下载
        var a = document.createElement("a");
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", false, false);
        a.href = href;
        a.download = name;
        a.target = '_blank';
        a.dispatchEvent(e);
        a.remove();
    }
}

在这里涉及到BLob对象,相关技术文档可以了解学习一下
2020.4.2