一、＜a＞标签如何实现下载

最新推荐文章于 2024-07-04 15:15:40 发布

Dove_1234

最新推荐文章于 2024-07-04 15:15:40 发布

阅读量2.9k

点赞数 1

分类专栏：前端

原文链接：https://www.jianshu.com/p/7bb6842ccb29

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实习期间负责的第一个项目：广东互联网协会官网。其中有一个很常见的功能----点击下载。

页面截图

在此之前，我所认识的<a>标签只是用于页面跳转的，实现文件下载是如何做到的呢？

答案是：使用href与download属性

<a href="http://image.gdis.cn/files/201809171147055.doc"  download="协会团体会员入会申请表"></a>

关于兼容性问题：我在Chrome 68.0、Opera 56.0、Firefox 61.0.2 、 IE 11 测试，下载功能都是可以实现哒~

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="test.doc" download="test">下载</a>
</body>
</html>

在Chrome中：

Chrome下载文件

在Opera 56.0中：

Opera下载文件

在IE 11 中：

IE11下载文件

在Firefox中：

Firefox下载文件

在Firefox浏览器测试的时候遇到一个问题：download属性的值为文件名，但是当download="test"时，火狐浏览器下载出来的文件没有自动识别后缀名。下载出来的文件如下图所示：

文件无后缀名

当download="test.doc"时，

文件类型识别为DOC文档

其他浏览器无此问题。

download属性是HTML5的新属性，实现了静态资源的点击下载。但对于动态资源的下载与下载量统计就无能为力了。关于下载这一说，在这里记录下我男神张鑫旭的博客：

了解HTML/HTML5中的download属性:
https://www.zhangxinxu.com/wordpress/2016/04/know-about-html-download-attribute/
JS前端创建html或json文件并浏览器导出下载
https://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/
理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/

作者：南客nk
链接：https://www.jianshu.com/p/7bb6842ccb29
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。