通过＜a＞标签实现文件下载，并自定义文件名称

原创 已于 2023-06-03 14:33:52 修改 · 5.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

于 2022-02-14 15:12:29 首次发布
本文介绍了如何在HTML中使用<a>标签下载文件，并展示了如何通过href属性指定文件地址，同时利用download属性自定义下载文件的名称。 
<a href="/images/demo.png" download="样例">下载</a>

  •  href 是文件地址 ，在 <a> 标签中必须设置 href 属性。
  • download  自定义名称
js下载文件并修改文件名
01-19
用js下载文件，使用标签，添加download属性即可。 var a = document.createElement(a); a.href = http://XXX.com/audioStream/8a9dbae9d0859e48fc1f590fcf6d4ccc.mp3； a.download =test.mp3; a.click(); 但是如果想给文件重新命名，貌似js无法实现。 因此考虑后台实现，用java代理请求，获取文件设置文件名，返回到前端。 public void downFiles(HttpServletResponse response,String
使用a标签下载时,设置下载的文件名称
m0_71130954的博客
04-12 6309
a标签下载问题
【JS】使用a标签下载文件方法
最新发布
qq_45677671的博客
09-28 1093
本文介绍了四种前端文件下载方法：1）同源文件直接使用<a>标签加download属性；2）跨域文件若服务器设置Content-Disposition也可用此法；3）支持CORS的跨域文件可通过fetch转为Blob URL下载；4）否则需服务器代理。具体实现包括：静态<a>标签使用、动态创建下载链接、以及通过fetch接口获取文件数据并转换为Blob对象下载的完整代码示例。文中特别提供了处理POST请求下载的fetch示例，并强调跨域场景下的不同处理方案。
设置a标签下载文件的文件名
toTiger的博客
06-22 3605
设置a标签下载文件的文件名
a标签设置下载设置文件名，并且设置无效的解决方法
锦瑟年华L的博客
09-10 635
a标签设置下载设置文件名，并且设置无效的解决方法
a标签下载文件 自定义下载文件名
热门推荐
龚清林的博客
07-03 2万+
使用a标签的download属性 该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。 <a href="/file/123.zip" download="456"> 下载下来的文件命名是“456.zip” 注意：只有 Firefox 和 Chrome 支持 download 属性。 ...
【常用代码】vue中使用a标签下载文件pdf、docx、doc，xls等，赋值文件名
qq_51055690的博客
04-14 2669
有文件路径，项目域名+文件路径打开，可以直接在浏览器新窗口下载文件，使用window.open打开还会阅读pdf，而不会下载pdf文件。
a标签下载设置
现役码农的博客
11-20 7417
通过a标签来实现简单的点击下载。一般情况下我们使用a标签都是页面跳转之类的。但是a标签也可以实现文件类的下载（前提要下载的文件已经在服务器上或者相对路径下存在） 正常情况下： &lt;a href="文件的相对路径"&gt;测试&lt;/a&gt; 但是像上面这样的编写，遇到txt等文件，浏览器会直接将文件打开，而不是下载下来 添加download属性：   &lt;a href="...
【前段开发】使用a标签下载文件并重命名
有一棵树的博客
12-03 5055
如 w3cshcool 所示 <a href="/images/myw3schoolimage.jpg" download="w3logo"> 官方地址 https://www.w3school.com.cn/tags/att_a_download.asp 一般用js 创建一个a标签 const link = document.createElement('a'); link.download = '自定义的文件名'; link.href = '下载地址'; lin...
文件下载重命名（可跨域）
pqj222的博客
10-18 5821
一、正常情况下，我们都如此下载文件并修改文件名，在a标签上面添加download属性 var link = document.createElement('a'); link.href = file.url; link.download = file.name; link.target="_blank"; link.click(); 由于a.download跨域会失效，上面代码只可同...
【web】使用a 标签下载文件
michael的博客
11-14 4114
标签下载只能下载同源的文件，如果是跨域的文件，这里包括图片、音视频等媒体文件，都是预览，也无法下载。就上面的这个示例，我们点击下载，发现是跳转到了百度的首页，并没有真的下载文件。它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的。标签来实现文件下载，这种方式是最简单的，也是我们比较常用的方式。效果和上面的一样，都是跳转到百度的首页，没有下载文件。的最后一部分作为文件名。，那么就会使用请求的。
a标签实现文件下载
Calamus
12-27 2863
如果想通过纯前端技术实现文件下载，直接把a标签的href属性设置为文件路径即可，如下： &lt;a href="./calamus.pdf"&gt;下载&lt;/a&gt; 但是，对于 txt , jpg , pdf 等浏览器支持直接打开的文件不会被执行下载，而是会直接打开，这时候就要用到新属性download了 download也可以为空，这样就是默认文件名 &...
HTML中的一些细节处理
jxmchou的博客
11-03 839
# 说明 参考资料:简书的 伴歌知行的JS下载图片和文件，防止浏览器直接打开 、夜半修仙,;优快云的weixin_3791475的使用a标签下载文件不跳转;努力学习的汪：洪学习笔记 文章目录# 说明前端利用a标签实现文件[图片]下载文件下载常用方式总结分析Ⅰ-后端设置下载请求的响应头 `Content-Disposition` 强制下载Ⅱ-实现[HTMLCanvasElement]类型图片下载Ⅲ- a标签+download属性Ⅳ-通过接口跨域请求，动态创建a标签，以blob形式下载1、`fetch`请
a href自定义下载文件名
summer的博客
12-06 1173
a.download = '新文件名'//设置下载文件的名字。
通用创建a标签打开下载文件或blob对象 自定义文件名
刻痕
02-21 1627
url： 下载地址，或者blob对象，必选 saveName： 保存文件名，可选 const openDownloadDialog = (url, saveName) => { if(typeof url == 'object' && url instanceof Blob) { url = URL.createObjectURL(url); // 创建blob地址 } var aLink = document.createElement('a'); aLink.hr.
a标签下载文件
canyi8023的博客
12-02 302
问题记录： 点击时打开了文件，不管是pdf还是jpg，不管target是blank还是self，想要实现点击时直接在当前页面下载文件。 解决方案： 在href后拼接"?response-content-type=application/octet-stream"，添加download属性。 例： <a style="color:#0286DF;" rel="nofollow noopener noreferrer" :href="地址+'?response-content-type=appl
JSP自定义标签：实现SQL数据自动填充<select>功能
- 使用时，在JSP页面中引入该jar文件，并通过TLD文件中定义的前缀和标签名来使用自定义标签。 综上所述，JSP自定义标签的创建和使用是J2EE开发中一个非常实用的技能，能够有效地提升开发效率和代码质量。通过封装...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值