一、标签如何实现下载

2018-11-06  本文已影响0人  南客nk

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


页面截图

在此之前,我所认识的<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/

最近整理了一些IT课程资源,包括慕课网、极客时间等等,入门课、实战课、就业课都有哦,需要学习资源的话可以联系wx: nanke951221
好好学习,升职加薪!

上一篇下一篇

猜你喜欢

热点阅读