前端通用下载文件方法（兼容IE）

因为项目要求要兼容IE浏览器，所以完善了一下之前博主的方法

• IE 浏览器：使用微软自带的msSaveBlob 方法，a标签的download属性不支持IE
• 谷歌浏览器，火狐浏览器：创建a标签 ，添加download属性，模拟鼠标点击事件

 

ajax在请求时一定要设置返回类型：{ responseType: 'blob' }，要不然下载下来的文件打不开

new Blob([res.data.fileData], {type: 'application/json;charset=utf-8'})，type值可以不进行设置

//这里res.data是返回的blob对象
        var blob = new Blob([res.data.fileData], {type: 'application/json;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, 'model.json')
          } catch (e) {
            console.log(e);
          }
        } else {
          // 谷歌浏览器 创建a标签 添加download属性下载
          var downloadElement = document.createElement('a');
          downloadElement.href = href;
          downloadElement.target = '_blank';
          downloadElement.download = 'model.json'; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        }

 

前端根据图片url链接下载图片

function downloadImg(url, name) {
    if (!url) return;
    var x = new XMLHttpRequest();
    var resourceUrl = url;
    let downloadName = name; //下载名称 默认为当前时间
    x.open('GET', resourceUrl, true);
    x.responseType = 'blob';
    x.onload = function () {
        // ie10+
        if (navigator.msSaveBlob) {
            var name = resourceUrl.substr(resourceUrl.lastIndexOf('/') + 1);
            return navigator.msSaveBlob(x.response, name);
        } else {
            var url = window.URL.createObjectURL(x.response);
            var a = document.createElement('a');
            a.href = url;
            a.download = downloadName;
            a.click();
        }
    };
    x.send();
}

 

 // 下载zip文件
    downloadZip(data, filename) {
        let blob = new Blob([data], { type: 'application/zip' })
        let url = window.URL.createObjectURL(blob)
        //兼容ie的写法
        if (window.navigator.msSaveBlob) {
            try {
                window.navigator.msSaveBlob(blob, '异常统计报表.zip')
            } catch (e) {
                console.log(e)
            }
        } else {
            const link = document.createElement('a') // 创建a标签
            link.style.display = 'none' // 隐藏它，用户交互很重要，圈起来
            link.href = url
            link.setAttribute('download', '异常统计报表')
            document.body.appendChild(link) // 将组装好的下载器置入页面body
            link.click()
            document.body.removeChild(link) // 下载完毕删除a标签
            window.URL.revokeObjectURL(url) // 释放内存
        }
    },
    /**
     * 下载文件
     * data：后端返回的二进制文件流
     * name：下载文件的文件名称
     * type：下载文件的类型 cnblogs.com/dingjiaoyang/p/5831049.html
     *  'pdf'        => 'application/pdf',
     *  'xls'        => 'application/vnd.ms-excel',
     *  'zip'        => 'application/zip',
     *   'gif'        => 'image/gif',
     *  'jpeg'        => 'image/jpeg',
     *  'jpg'        => 'image/jpeg',
     *  'png'        => 'image/png',
     *  'doc'        => 'application/msword',
     *   'exe'        => 'application/octet-stream'
     *  suffix：后缀，为了兼容ie浏览器的情况
     */
    downloadFile(data, name, type, suffix = 'png') {
        if (!data) {
            return // 如果请求没有接收到任何数据，就不执行钩子方法
        }

        //取请求返回的response对象中的blob 设置文件类型
        let blob = new Blob([data], { type: type })
        if ('download' in document.createElement('a')) {
            // 不是IE浏览器
            let url = window.URL.createObjectURL(blob) // 组装一个下载器
            let link = document.createElement('a') // 虚拟一个a标签，用来触发文件下载操作
            link.style.display = 'none' // 隐藏它，用户交互很重要，圈起来
            link.href = url // 直接将对象给它的href
            link.setAttribute('download', name) // 保存下载文件名，给它一个下载的文件名
            document.body.appendChild(link) // 将组装好的下载器置入页面body
            link.click() // 自动触发点击事件==下载
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(url) // 释放掉blob对象
        } else {
            // IE 10+
            try {
                window.navigator.msSaveBlob(blob, name + '.' + suffix)
            } catch (e) {
                console.log(e)
            }
        }
    },
    // 下载img文件
    downloadImg(url, filename) {
        const link = document.createElement('a') // 创建a标签
        link.style.display = 'none' // 隐藏它，用户交互很重要，圈起来
        link.href = url
        link.setAttribute('download', filename)
        document.body.appendChild(link) // 将组装好的下载器置入页面body
        link.click()
        document.body.removeChild(link) // 下载完毕删除a标签
        window.URL.revokeObjectURL(url) // 释放内存
    },

 

 

参考链接：http://blog.haoji.me/js-download.html#JS-dan-chu-xia-zai-dui-hua-kuang