天天看点

前端通用下载文件方法(兼容IE10及以上)

之前在网上看到一个博主写的前端通用的下载文件的方法,个人觉得很实用,所以mark一下,方便以后查阅

源文地址(源文还有上传/下载excel文件方法)

因为项目要求要兼容IE浏览器,所以完善了一下之前博主的方法
  • IE 浏览器:使用微软自带的msSaveBlob 方法,a标签的download属性不支持IE
  • 谷歌浏览器(只测试过谷歌):创建a标签 ,添加download属性,模拟鼠标点击事件
function openDownloadDialog(url, saveName) {
    // for ie 10 and later
    if (window.navigator.msSaveBlob) {
        try {
            window.navigator.msSaveBlob(url, downloadFileName);
        }
        catch (e) {
            console.log(e);
        }
    }
    // 谷歌浏览器 创建a标签 添加download属性下载
    else {
        if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
        var event;
        if (window.MouseEvent) {
            event = new MouseEvent('click');
        }
        else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    }
}
           

参数说明:

             url:需要下载的对象 或者 下载文件的地址

             saveName:保存的文件名