blob() 一个url下载文件，并更改文件名的方法

最新推荐文章于 2025-04-10 16:15:11 发布

Liszter

最新推荐文章于 2025-04-10 16:15:11 发布

阅读量3.1k

点赞数 1

分类专栏：前端文章标签： firefox safari 前端

本文链接：https://blog.csdn.net/qq_39198394/article/details/125386867

版权

前端专栏收录该内容

5 篇文章

订阅专栏

该博客内容涉及JavaScript的XMLHttpRequest对象用于从指定URL获取资源，并利用Blob对象和创建下载链接的方式实现文件下载。主要涵盖了前端开发中的异步请求和文件操作技术。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.response)
                let blob = new Blob([xmlhttp.response], {
                    type: "*"
                });
                console.log(123, blob)

                const creatA = document.createElement("a");
                creatA.href = URL.createObjectURL(blob);

                creatA.download = `自定义想怎么命名就怎么命名.类型`
                creatA.click();
                document.body.appendChild(creatA);
                document.body.removeChild(creatA); // 下载完成移除元素
                window.URL.revokeObjectURL(creatA.href); // 释放掉blob对象
            }
        }
        xmlhttp.open("GET",
            "图片地址换个能用的，不知道这个能不能用了", // https://img-blog.csdnimg.cn/2018112215425427.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h3aHNvbmc=,size_16,color_FFFFFF,t_70
            true);
        xmlhttp.send();
    }


    loadXMLDoc()
</script>

</html>