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

最新推荐文章于 2023-11-15 14:51:43 发布

飞奔的喀纳斯蜗牛

最新推荐文章于 2023-11-15 14:51:43 发布

阅读量930

点赞数

分类专栏：前端 IE兼容文章标签： javascript web

本文链接：https://blog.youkuaiyun.com/qq_39235090/article/details/106123406

版权

针对IE浏览器不支持a标签download属性导致下载文件名包含随机数的问题，本文介绍了一种方法，确保文件能以原始名称进行下载，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有些时候上传的文件名会重复，后台工程师就会在存入数据库时文件路径加上随机数，文件名单独存个字段；
在谷歌上下载文件时，只要后台返回了文件名，就可以使用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浏览器

最低0.47元/天解锁文章