实习期间负责的第一个项目:广东互联网协会官网。其中有一个很常见的功能----点击下载。
在此之前,我所认识的<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中:
在IE 11 中:
在Firefox中:
在Firefox浏览器测试的时候遇到一个问题:download属性的值为文件名,但是当download="test"
时,火狐浏览器下载出来的文件没有自动识别后缀名。下载出来的文件如下图所示:
当
download="test.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
好好学习,升职加薪!