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

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

页面截图

在此之前，我所认识的<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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一、＜a＞标签如何实现下载相关推荐

公众号裂变游戏H5性格标签生成器源代码下载
公众号裂变游戏H5性格标签生成器源代码下载这个代码我已经测试,保证可用.需要的免费拿去吧,不要钱使用的时候,只要控制好IP和域名,一天增粉可以达到1000人以上. 这个公众号裂变速度还是非常快的. ...
【HTML】video标签处理隐藏下载按钮等
[HTML]video标签处理隐藏下载按钮等隐藏下载按钮增加 controlsList="nodownload" 属性 <video controlsList=&quo ...
【js】a标签点击下载
处理问题: 兼容不同浏览器的a标签点击下载 export const downLoadFile = ({url,fileName,downType, }: {url: stringfileName: ...
去掉h5播放器中voide标签中的下载按钮
去掉H5播放器中voide标签中的下载按钮,参考代码: <video width="320" height="240" controls> & ...
解决Vedio标签视频禁止下载方法
1.屏蔽鼠标右键:<body oncontextmenu = "return false"> 2.屏蔽视频播放器右下角三个点的下载按钮(chrome会显示): < ...
a标签download属性下载excel
在后端只给数据的情况下,前端根据数据列表生成excel并下载 function tableToExcel(data){// 利用table制作excel的表头let str = '<tr> ...
【技术贴】火狐的悬停激活标签扩展插件下载。Tab Focus
火狐专用鼠标悬停激活标签,像360和搜狗浏览器那样的把鼠标放在标签上,一般都是设置200ms激活此标签. https://addons.mozilla.org/zh-CN/firefox/addon ...
react - 利用a标签，完成下载及跳转
1. button绑定下载事件 <Button onClick={() => {this.handleDownExcel()}}> 导出 </Button> 2. 导出函 ...
vue 使用a标签跨域下载文件
vue项目中下载文件场景:项目中下载文件过大时接口无法正常响应, 后端给的解决方案是从另一个文件服务器上下载文件,所以提供的是一个跨域访问的api接口,前端需跨域调用后端接口下载文件 // 下载as ...

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

一、＜a＞标签如何实现下载相关推荐

最新文章

热门文章