a标签的download属性简介
2024-10-19 16:20:47
最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载。
简介
HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
href和download是我们下载文件所需要的两个属性:
- href:是指这个超链接指向的url地址;
- download:该属性是HTML5新增的属性,此属性是让我们的浏览器下载URL而不是跳转到URL所指向的内容,所以若我们需要下载文件到本地,需要设置这个属性值。
下载一张图片
1. 使用href属性,指定图片地址:
<a href='./img/img01.jpg'>查看图片</a>
这样的情况,我们得到的效果是,页面跳转到指定的url地址。
2. 增加download属性试试:
<a href="./img/img01.jpg" download="dog.jpg">下载图片</a>
Firefox弹出下载框,chrome直接下载,safari没有响应下载,依旧跳转到指定url显示图片,其他浏览器尚未测试。所以这个属性目前兼容性确定不怎么好。我的当前chrome版本: 70.0.3538.77(正式版本);
兼容性
caniuse上查询的兼容性数据:
检测当前浏览器是否支持download属性:
let canSupportDownload = 'download' in document.createElement('a');
目前我们可以在浏览器预览的文件还有pdf、ppt、txt等,倘若能够通过a标签直接下载到本地,这利于用户也利于开发,也不需要server再来处理文件下载。但是现目前的兼容性还是一个大问题,并不适合投入到项目中,期待未来,前路漫漫。
最新文章
- 表中排序ID断开重排
- CCNA网络工程师学习进程(4)网络设备的基本配置和详细介绍
- postgresql 函数返回结果集(zz)
- CDH中HDFS的WEB UI外网无法访问的问题
- editplus配置详:
- MVC5学习相关资源整理
- iOS长按选择
- Biztalk AS2开发经验总结
- linux socket编程之TCP与UDP
- mac pro换屏指南
- vue翻页器,包括上一页,下一页,跳转
- 【blog】mysql字段类型datetime和timestamp的区别
- 错误 Unable to find vcvarsall.bat 的终极无敌最完美的解决办法
- [LeetCode&;Python] Problem 463. Island Perimeter
- 【codeforces】【比赛题解】#854 CF Round #433 (Div.2)
- 全面了解 Nginx 主要应用场景
- 在Hboxlayout中组件的显示比例
- 白盒测试实践-任务进度-Day01
- 【C#】LINQ
- python--opencv模块
热门文章
- 怎么实现hibernate悲观锁和乐观锁?
- python2.7入门--- 日期和时间
- c# string.format和tostring()
- LeetCode:26. Remove Duplicates from Sorted Array(Easy)
- javac一次性编译多个包下的.java文件
- 【多校联合】(HDU6095)Rikka with Competition
- Ubuntu 首次给root用户设置密码
- 解析车辆VIN码识别(车架号识别)系统
- 2015年开源前端框架盘点TOP20
- AcCoder Contest-115 D - Christmas