前端文件下载时重命名文件名

JavaScript HTML 跨域 About 2,175 words

a 标签

使用a标签的download属性可重命名文件名。但必须是同源，在跨域的网页中无法重命名。

<a href="https://xxx.com/pic.jpg" download="test.jpg">download</a>

js 实现

对于跨域的下载，可使用js实现。但如果文件服务器有限制跨域，还需后端解除限制。

<a href="javascript:void(0)" onclick="fileDownload('url','name')>download</a>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <title>Title</title>
    <script>
        /**
        * 下载
        * @param  {String} url 目标文件地址
        * @param  {String} filename 想要保存的文件名称
        */
        function fileDownload(url, filename) {
            getBlob(url, function(blob) {
                saveAs(blob, filename);
            })
        }
        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 link = document.createElement('a');
                var body = document.querySelector('body');

                link.href = window.URL.createObjectURL(blob);
                link.download = filename;

                // fix Firefox
                link.style.display = 'none';
                body.appendChild(link);

                link.click();
                body.removeChild(link);

                window.URL.revokeObjectURL(link.href);
            }
        }
    </script>
</head>
<body>
<a referrerPolicy="no-referrer" href="javascript:void(0)" onclick="fileDownload('https://xxx.com/pic.jpg','ccc.jpg')">download</a>

<br>

<a href="https://xxx.com/pic.jpg" download="test.jpg">download2</a>

</body>
</html>

Views: 8,176 · Posted: 2020-09-18

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓