当前位置： 移动技术网 > IT编程>网页制作>Html5 > 设置a标签的download属性实现下载功能

设置a标签的download属性实现下载功能

2020年07月24日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网