HTML5 a标签url下载文件

最新推荐文章于 2025-05-24 20:36:00 发布

travelzhang

最新推荐文章于 2025-05-24 20:36:00 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript html 文章标签： html5 a 网页下载

本文链接：https://blog.youkuaiyun.com/travelzhang/article/details/79898775

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍前端实现文件下载的方法，包括单文件与批量下载的具体实现。针对跨域问题，提出了解决方案，并给出了批量下载时可能遇到的问题及解决思路。

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

需求：后端提供下载url，前端实现文件网页端单文件下载及批量下载：

1.单文件下载：直接使用a标签，download属性还可以修改文件名称，但跨域的时候，该文件名称不起作用。如以下代码所示：

<!--未跨域的情况可以修改文件名称为test.gif-->                           
<a href="index_logo.gif" download="test.gif">下载</a>                   
<!--跨域情况修改文件名失败，下载的文件是一串字符名称-->                 
<a href="http://www.baidu.com/xxxxxxx.png" download="test.png">下载</a>

解决办法：跨域的时候，可以禁用a标签的点击事件，选择右键另存为，则可以修改下载文件的名字。

//禁用单文件下载单击事件
var function = forbidSingleDownloadClick(e){
    e.preventDefault();
}

2.批量下载，通过打开新的窗口下载文件，有时候会遇到用户拦截弹窗的情况，所以如果批量下载只能下载一个文件，可以查看下chrome浏览器弹窗设置是否开启

//downloadUrlArray是一个包含下载url的数组
downloadUrlArray.forEach(function(item) {
    var newWindow = window.open();
    setTimeout(function() {
        newWindow.location = item;
        setTimeout(function() {
            newWindow.close();
        }, 1000);
    }, 1000);
});

具体位置：chrome://settings/content/popups，弹出窗口设置为允许即可。

更多相关下载文章：

 http://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/

http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/