如何在点击a标签下载文件的时候通过JavaScript动态的修改文件的名称？

有蝉

已于 2022-03-14 18:45:18 修改

阅读量7.2k

点赞数 4

分类专栏： js 文章标签：下载文件修改文件名称

于 2020-01-10 15:00:29 首次发布

本文链接：https://blog.csdn.net/qq_37899792/article/details/103924657

版权

js 专栏收录该内容

77 篇文章 3 订阅

订阅专栏

当返回的文件是以文件流的形式返回的时候，前端可以自由更改文件名称

但是如果只有一个链接地址怎么办呢？

方法如下：（前端自己创造文件流）

<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>下载文件实验</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <a id="a">adf</a>
    <script type="text/javascript">


        $("#a").click(function () {
            var url = "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";
            var name = "它的名字";
            download(url, name);

        })

        /**
        * 下载
        * @param  {String} url 目标文件地址
        * @param  {String} filename 想要保存的文件名称
        */
        function download(url, filename) {
            getBlob(url, function (blob) {
                saveAs(blob, filename);
            });
        };
        /**
        * 获取 blob
        * @param  {String} url 目标文件地址
        * @return {cb} 
        */
        function getBlob(url, cb) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (xhr.status === 200) {
                    cb(xhr.response);
                }
            };
            xhr.send();
        }

        /**
        * 保存
        * @param  {Blob} blob     
        * @param  {String} filename 想要保存的文件名称
        */
        function saveAs(blob, filename) {
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, filename);
            } else {
                var a = document.createElement('a');
                var body = document.querySelector('body');
                a.href = window.URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                body.appendChild(a);
                a.click();
                body.removeChild(a);
                window.URL.revokeObjectURL(a.href);
            };

        }
    </script>

</body>

</html>

有蝉

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
如何在点击a标签下载文件的时候通过JavaScript动态的修改文件的名称？

当返回的文件是以文件流的形式返回的时候，前端可以自由更改文件名称但是如果只有一个链接地址怎么办呢？方法如下：（前端自己创造文件流）<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"...
复制链接

扫一扫

专栏目录