a标签 download属性不生效，一直还是预览图片BUG

最新推荐文章于 2025-09-28 18:03:45 发布
原创 最新推荐文章于 2025-09-28 18:03:45 发布 · 2.1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#a标签 #download

本文介绍了解决使用前端a标签download属性下载文件时遇到的问题。当链接指向IP地址时，该属性可能无效，解决方法是将IP地址替换为域名。此外，对于通过后端处理的下载需求，可以通过设置Content-Disposition: attachment来实现。
  • 问题描述：前段时间一直想使用前端的a标签实现文件下载，使用的a标签的download属性就能实现。可是FTP服务器的图片还是一直只能预览无法直接下载。
#使用的地址是直接使用的IP端口的，原因就出在这里：当请求地址是ip的时候 a 标签的 download 属性无法生效。
<a href="http://192.168.xx:8089/virtualPath/facility/document/2018/07/09/44a9a76a-084a-415a-9d50-e26ea28b55ce/0b48ed694ef510393ad2e829d6ec2fad.jpg" download="" class=""></a>

#解决办法：将ip改成域名
<a href="http://www.xx.com/virtualPath/facility/document/2018/07/09/44a9a76a-084a-415a-9d50-e26ea28b55ce/0b48ed694ef510393ad2e829d6ec2fad.jpg" download="" class=""></a>

补充:如果下载走后台代码遇到这种问题，可以直接设置Content-Disposition:attachment

参考网址：https://blog.csdn.net/ssssny/article/details/77717287
参考书籍：http://www.rfc-editor.org/rfc/rfc2616.pdf 19.5.1章节

史上最全wireshark使用教程，8万字整理总结，建议先收藏再耐心研读
孙叫兽的博客
07-14 3万+
目录 第1章介绍... 1 1.1.什么是Wireshark. 1 1.1.1.主要应用... 1 1.1.2.特性... 1 1.1.3.捕捉多种网络接口... 2 1.1.4.支持多种其它程序捕捉的文件... 2 1.1.5.支持多格式输出... 2 1.1.6.对多种协议解码提供支持... 2 1.1.7.开源软件... 2 1.1.8.Wireshark不能做的事... 2 1.2.系通需求... 2 1.2.1.一般说明... 2 ...
Qt开发经验总结
草上爬的博客
12-02 1万+
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
a 标签 download 属性失效解决方案
呆呆papa的博客
02-17 3532
在网页中为了实现附件下载功能通常会使用 a 标签的 download 属性，但是对于跨域的图片资源，浏览器会直接打开这个图片，而不是下载。在 JavaScript 使用 ajax 获取图片内容，然后动态创建文件地址，通过模拟 a 标签的点击事件完成下载。将图片地址页面同源处理，可以在nginx中配置代理转发到指定的图片地址。// 需要指定响应类型为 blob。
HTML--a--download-属性
一万年太久，只争朝夕
09-23 2777
测试地址 <a href="http://www.cuit.edu.cn/Images/logo.png" download="cuit_logo">下载图片</a> ###定义和用法 href 属性定义了下载链接的地址。 download 属性定义了下载文件的名称，文件扩展名由浏览器自动检测添加。 (1) 当 download 属性值不为空时，下载的文件的名字由 download 的属性值确定，扩展名分两种情况： ① download 中指定后缀名 <a href="150
【JS】使用a标签下载文件方法
最新发布
qq_45677671的博客
09-28 1188
本文介绍了四种前端文件下载方法：1）同源文件直接使用<a>标签加download属性；2）跨域文件若服务器设置Content-Disposition也可用此法；3）支持CORS的跨域文件可通过fetch转为Blob URL下载；4）否则需服务器代理。具体实现包括：静态<a>标签使用、动态创建下载链接、以及通过fetch接口获取文件数据并转换为Blob对象下载的完整代码示例。文中特别提供了处理POST请求下载的fetch示例，并强调跨域场景下的不同处理方案。
a标签下载文件重命名失败download 无效
浮游的博客
12-18 1941
download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。但是需要注意的是此方法只适用于小文件，对于大文件来说耗时太久，不适用。因为它相当于先把文件下载下来了，所以需要比较长时间，但是这段时间的等待，对于用户交互来说，那是很不友好的。，即可直接下载，而且对于一些txt、img、mp4等浏览器直接渲染的类型，也可以实现下载，而不是直接打开。
在HTML5中，＜a＞标签设置了download属性，图片仍然会在浏览器中直接打开而不是触发下载
K___End的博客
04-07 2522
而对于纯前端解决方案，如果遇到浏览器总是尝试打开图片而不是下载，可能需要结合其他技术手段，比如借助Blob对象和URL.createObjectURL()方法配合JavaScript动态创建下载链接，以绕过浏览器的默认行为。：服务器发送的MIME类型也会影响浏览器的行为，如果服务器明确指定了图片MIME类型，浏览器可能会按照该类型解析并显示图片。：如果图片资源位于不同的域，并且服务器没有设置允许跨域下载（CORS头部），浏览器出于安全考虑可能不会允许直接下载。属性，浏览器也可能优先选择显示而非下载。
a标签download属性不起作用
热门推荐
sun
01-18 4万+
a标签download属性不起作用 首先要明白的是，download属性是HTML5新增的属性，也就是作用在HTML5的基础之上，他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称，比如： <a href="/images/a.exe" download>点击下载</a> 上面这段代码会下载a.exe,并采用默认命名 <a href="/...
android动画不占cpu如何实现,【实战总结】帧动画调优实践
weixin_34385935的博客
05-25 2238
原标题：【实战总结】帧动画调优实践原文链接：https://www.zybuluo.com/avenwu/note/876161APP架构师整理发布，转载请联系作者获得授权。1.背景在做动画的时候我们有很多选择方案。最常见的是Android原生的帧动画，位移动画，旋转动画，属性动画等等，具体根据动画效果选择实现方案；针对那些有规律，不太复杂的矢量动画我们往往也采取自定义View来实现，比如各种狂拽...
微信开发之旅———Day7（媒体api之图片api）
小隐的博客
04-17 534
（昨天不太舒服就鸽了一天，QAQ） 前天看了一个最常用的网络api——wx.request ！ 然后可能会有人问了，我想自己写api，怎么去做呢？这里给大家提供一个思路，就是用spring boot去写api，仅需要少量的配置，开发复杂度大大降低。（有需求的同学可以先去了解一下，我之后可能也会开一篇从零学spring boot吧，有兴趣的朋友们可以关注一下）。 之前还说过，除了这个api还有很多a...
微信小程序 bug 集中营
源码分享的博客
10-18 1648
微信小程序 bug 集中营 create byjsliangon2018-9-17 17:58:56 Recently revised in2018-10-18 09:38:15  Hello 小伙伴们，如果觉得本文还不错，记得给个star， 你们的star是我学习的动力！GitHub 地址  GitHub 最新更新：2018-10-17 13:34:11。追求最新...
a 标签的download 属性在谷歌浏览器下无法下载图片，如何处理？
weixin_30892763的博客
06-19 4646
a 标签的download属性在下载图片文件的时候是如何的方便，可是可是谷歌浏览器不支持下载，而是下载打开新窗口预览图片。这个兼容性问题如何解决呢？ 了解了一番，HTMLCanvasElement.toBlob()方法可以用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。 更多HTMLCanvasElement.toBlob()详情前去https://de...
为什么a标签无法下载，无法重命名？
qq_46344419的博客
07-25 917
为什么a标签无法下载，无法重命名？
Download 使用超链接，明明是文件，却只能预览，无法下载解决方案。
CSDN19970806的博客
07-17 8008
链接中加入download属性可以使用户将文件下载下来而不是直接用浏览器打开,截止到目前为止对HTML5提供支持的浏览器已经对这个属性支持得比较好了,下面我们就来详细看一下HTML5中的强制下载属性download使用实例解析:   相信大家在写前台的过程中，一定遇到过这样的问题，自己写了a标签，链接的地址是本地的一个图片。就像这样 &lt;a href=http://localhost:...
使用a标签下载文件时成了预览，并非是下载
Sapling
03-11 5253
function downloadFile(){ var request = new XMLHttpRequest(); request.responseType = "blob"; request.open("GET", "https://baidu.com/a.map"); request.onload = function() { ...
【2017-11-25】a标签中的download属性详解
kk_yanwu的博客
11-26 2万+
在H5中，为a标签新增了一个download属性，来直接文件的下载； 一 : 浏览器的支持 ①download属性暂时只支持Google Chrome 和 Mozilla Firefox，其他浏览器均不支持该属性； ②download是H5新增的属性，H5以前没有该属性； 二 : Chrome 浏览器测试// 引用本地文件 <a href="img/5
A中的标签download属性，你知道吗？
CodingNoob
07-17 2118
最近无意中发现A标签竟然有个download属性，于是就琢磨了下这个属性的用法，看了下文档。 才知道，如果给A标签href添加对应的图片或者文件地址，包括图片的base64地址都可以，然后在download属性设置对应的下载名称就可以下载图片了，这个属性可以作为直接点击下载图片，就不用用户再次点击右键保存了，还是有一定的用处。 ...
HTML ＜a＞标签 download 属性
qq_23835463的博客
09-26 836
HTML <a>标签 download 属性 download 属性定义了下载链接的地址。 在 <a> 标签中必须设置 href 属性。 download属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添 加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。 语法 <a download=“filename”> 实例 点击链接下载图片: ...
a元素的download属性
janthinasnail的博客
05-30 2893
之前一直使用php插件完成文件下载功能，今天看项目代码的时候，看到可以通过a的download属性进行下载，代码如下： html部分代码： <a onclick='downloadData'>download</a> js部分代码： function downloadData(){ // 使用a的download属性下载文件 var filen...
html中a标签download 不生效
04-23
### HTML 中 `<a>` 标签 `download` 属性不生效的原因分析 在现代浏览器中，HTML 的 `<a>` 标签可以通过设置 `download` 属性来实现文件下载功能。然而，在某些情况下该属性可能无法正常工作。以下是可能导致此问题的主要原因及其解决方案： #### 1. **跨域资源限制** 如果目标链接指向的是外部域名上的资源，则由于安全策略的限制，大多数浏览器会忽略 `download` 属性[^2]。这是因为跨域请求可能会引发隐私和安全性问题。 ##### 解决方法 - 将资源托管在同一域名下。 - 如果必须使用跨域资源，可以考虑通过服务器端代理的方式加载远程内容到本地再提供给用户下载。 ```html <a href="https://example.com/file.pdf" download>Download</a> <!-- 跨域时失效 --> ``` 改为： ```html <a href="/proxy/example.com/file.pdf" download>Download</a> <!-- 使用本地代理 --> ``` --- #### 2. **MIME 类型错误** 当服务器返回的内容 MIME 类型不符合预期（例如，应该返回 `application/octet-stream` 或其他二进制流类型），则浏览器可能不会触发下载行为而是尝试直接打开文件[^3]。 ##### 解决方法 确保服务器配置正确并发送合适的 Content-Type 响应头字段。对于强制下载的情况，推荐如下设置： ```http Content-Disposition: attachment; filename="desired-filename.ext" Content-Type: application/octet-stream ``` 示例代码片段展示如何动态创建可下载链接： ```javascript const link = document.createElement('a'); link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent("Hello, world!"); link.download = "hello.txt"; document.body.appendChild(link); // Required for Firefox link.click(); document.body.removeChild(link); ``` --- #### 3. **浏览器兼容性问题** 尽管主流浏览器均支持 `download` 属性，但在旧版 Internet Explorer 和部分移动设备上可能存在兼容性问题[^4]。 ##### 解决方法 针对这些环境，建议采用 JavaScript 实现替代方案或者引导用户保存页面中的嵌入式对象作为附件。 --- #### 4. **HTTPS 需求** 为了增强用户体验的安全性和一致性，许多现代浏览器仅允许 HTTPS 页面内的元素启用 `download` 功能[^5]。因此，未加密连接下的站点很可能遇到此类障碍。 ##### 解决方法 迁移至 SSL/TLS 加密传输协议 (即切换成 https 协议前缀)，从而满足最新标准的要求。 --- ### 总结 综上所述，要成功利用 `<a>` 标记配合其 `download` 参数完成文件获取操作需注意以上几点要素，并相应调整实际部署架构以克服潜在的技术难题。
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值