实习期间负责的第一个项目：广东互联网协会官网。其中有一个很常见的功能----点击下载。
页面截图
在此之前，我所认识的<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下载文件
在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/
最近整理了一些IT课程资源，包括慕课网、极客时间等等，入门课、实战课、就业课都有哦，需要学习资源的话可以联系wx： nanke951221
好好学习，升职加薪！
网友评论