兼容ie 附件下载,可自定义文件名

有些时候上传的文件名会重复,后台工程师就会在存入数据库时文件路径加上随机数,文件名单独存个字段;
在谷歌上下载文件时,只要后台返回了文件名,就可以使用a标签的download属性写成文件名,就可以保持原样下载下来,但是IE浏览器就不认识download属性,导致下载下来的文件名就是路径里面的名字(带上了随机数)。这样用户体验不好。
所以多方查找资料,写了一个方法,让我们可以让文件保持原来的名字下载下来。这里记录一下:

/**
     * 兼容ie 附件下载
     * urls: 文件相对地址
     * name: 文件下载名字
     */
    commonDowloadFile: function(urls, name) {
        //文件地址
        let url = urls;
        let 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, name)
                        } catch (e) {
                            console.log(e);
                        }
                    } else {
                        // 谷歌浏览器 创建a标签 添加download属性下载
                        var downloadElement = document.createElement('a');
                        downloadElement.href = href;
                        downloadElement.download = name; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        document.body.removeChild(downloadElement); //下载完成移除元素
                        window.URL.revokeObjectURL(href); //释放掉blob对象
                    }
                }
            }
            // 发送ajax请求
        xhr.send()
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章