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属性简介