设置a标签的download属性实现下载功能
程序员文章站
2022-03-22 09:52:52
HTML <a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
href和download是我们下载文件所需要的两个属性：
- href：是指这个超链接指向的url地址；
- download：该属性是HTML5新增的属性，此属性是让我们的浏览器下载URL而不是跳转到URL所指向的内容，所以若我们需要下载文件到本地，需要设置这个属性值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>a标签的download属性</title>
</head>
<body>
<div>
<p><a href="./images/1.png" download="xiazai">下载图片</a></p>
</div>
</body>
</html>
点击就可以进行图片的下载
检测当前浏览器是否支持download属性：
let canSupportDownload = 'download' in document.createElement('a');
目前我们可以在浏览器预览的文件还有pdf、ppt、txt等，倘若能够通过a标签直接下载到本地，这利于用户也利于开发，也不需要server再来处理文件下载。但是现目前的兼容性还是一个大问题。
关于浏览器相关的兼容性可以去看一下这篇文章a标签的download属性简介
本文地址：https://blog.csdn.net/xiaolinlife/article/details/107550136
上一篇： 前端学习笔记（4）之css背景属性合集
下一篇： 批处理应用 临时目录清理