一、<a>标签如何实现下载

article/2025/9/28 12:32:55

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

 

页面截图

 

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


http://chatgpt.dhexx.cn/article/CprRAdCm.shtml

相关文章

面试官:如何用a标签实现文件下载?(一文带你手撕知识点)

前言 大家好&#xff0c;今天给大家带来前端小知识&#xff1a;前端利用a标签实现文件&#xff08;图片&#xff09;下载&#xff0c;也就是教大家利用a标签或者是 window.open() 来实现下载功能。 文章目录 前言常用方式方法分析代码实现 常用方式 <a href"url"…

Jquery之遍历元素

J q u e r y Jquery Jquery之遍历元素 使用 e a c h ( ) each() each()方法传入函数两个参数分别为 i n d e x , d o m index,dom index,dom对象。 <body><div>1</div><div>2</div><div>3</div> </body> <script src&quo…

jQuery 遍历数据

在jQuery 中&#xff0c; $.each( )方法主要用于遍历数据&#xff0c;通过该方法&#xff0c;我们可以遍历任何一个对象&#xff0c;比如数组和对象。 语法格式&#xff1a; $.each(object,function(index,ele))示例&#xff1a; &#xff08;1&#xff09;遍历数组的数据 …

jQuery - 元素遍历

前言&#xff1a; 一提到“遍历”,大家一般都能联想到 each() 或者 for()等语法&#xff0c;但是在jQuery中究竟什么是遍历&#xff1f; 什么是遍历&#xff1a; jQuery 遍历&#xff0c;意为"移动"&#xff0c;用于根据其相对于其他元素的关系来"查找&qu…

Jquery-节点遍历4种方法

节点遍历 遍历子元素 遍历同辈元素 遍历前辈元素 其他遍历方法 遍历子元素 children()方法可以用来获取元素的所有子元素 $(selector).children([expr]); 获取<section>的子元素&#xff0c;但不包含子元素的子元素 var $section $("section").childr…

jq遍历元素

jq遍历元素 通过jq遍历元素、并控制一些元素的属性&#xff08;显示/隐藏、value、src等等&#xff09;&#xff0c;是我们在开发之中比较常见的操作&#xff0c;也为我们的业务功能扩宽了方向&#xff0c;接下来我将结合近段时间在工作上的际遇粗略介绍一下一些稍稍复杂的jq遍…

JS 遍历

目录 1. for 数组遍历2. for ... of3. forEach( )4. some( )5. every( )6. filter( )7. map( )8. find( )9. findIndex( )10. reduce( )11. reduceRight( ) 对象遍历1. for ... in2. Object.keys( )3. Object.values( )4. Object.entries( )5. Object.getOwnPropertyNames( ) 1…

数据库——数据字典

数据库——数据字典是什么&#xff1f; 一.数据字典以及使用场景&#xff1a; User表&#xff0c;User主体有很多属性&#xff0c;比如证件&#xff08;身份证、居住证、港澳通行证…&#xff09;地区&#xff08;河北、河南、北京…&#xff09;等&#xff0c;然后表建好了&…

数据库设计--数据字典

数据字典定义 数据字典&#xff08;data dictionary&#xff09;是对于数据模型中的数据对象或者项目的描述的集合&#xff0c;这样做有利于程序员和其他需要参考的人。分析一个用户交换的对象系统的第一步就是去辨别每一个对象&#xff0c;以及它与其他对象之间的关系。这个过…

解决Error: ENOENT: no such file or directory, scandir ‘xxx\node-sass\vendor‘

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 cnpm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\node…

Syntax Error: Error: ENOENT: no such file or directory, scandir ‘D:

在使用npm安装node-sass的时候&#xff0c;可能会出现如下的报错&#xff1a; Syntax Error: Error: ENOENT: no such file or directory, scandir D:\work\ 解决方案是执行以下方法&#xff1a; npm rebuild node-sass

扫描dir目录函数之scandir()

scandir: 读取特定的目录数据头文件: dirent.h 函数定义: int scandir(const char *dir, struct dirent ***namelist, int (*select)(const struct dirent *), int (*compar)(const struct dirent**, const struct dirent**)); 说明: scandir()会扫描参数dir指定的目录文件, …

解决Error: ENOENT: no such file or directory, scandir

解决Error: ENOENT: no such file or directory, scandir xxx\node-sass\vendor 前端项目持续部署打包中出现一个奇怪的问题&#xff0c;记录一下。 cnpm install 安装依赖成功 npm run build 构建时失败了&#xff0c;错误表示没有 D:\andex\stofrontend\node_modules\nod…

Module build failed: Error: ENOENT: no such file or directory, scandir node_modules\node-sass\vendor

npm install 报错 Module build failed: Error: ENOENT: no such file or directory, scandir D:\workspaces\xxx\node_modules\node-sass\vendor npm install node-sass 或者 npm rebuild node-sass 即可 下载完成后项目成功启动。

解决Vue Disconnected from UI server errno: -4058, syscall: ‘scandir‘, code: ‘ENOENT‘,

启动vue ui时出现上述报错 查看powershell中的错误提示 发现问题出在扫描项目时项目中少了某个文件夹 解决方法&#xff1a;手动创建该文件 问题解决

npm安装electron时报Error: EPERM: operation not permitted, scandir.....

刚弄完vue脚手架,准备安装electron写个桌面应用&#xff0c;运行命令vue add electron-builder一直报错 Error: EPERM: operation not permitted, scandir C:\Users\ &#xff0c;百度解释说因为没有权限操作&#xff0c;于是百度试各种方法&#xff0c; 打开黑窗口一遍遍尝试&…

解决“: no such file or directory, scandir ‘..\node_modules\node-sass\vendor“

一、报错信息 二、出现原因 在下载包完成启动项目时出现 Error: ENOENT: no such file or directory, scandir ‘D:…\signpay-admin-new\node_modules\node-sass\vendor’ 三、解决办法 重新下载node-sass包即可 npm rebuild node-sass

解决 no such file or directory, scandir ‘node_modules\node-sass\vendor 报错

运行项目突然报错【no such file or directory, scandir node_modules\node-sass\vendor】这个错误 报错说是找不到node-sass文件路径&#xff0c;最后找到了解决方案 错误截图如下&#xff1a; 重新构建一下npm rebuild node-sass包 npm rebuild node-sass 再直接运行&…

C语言测试。自己实现scandir 函数

在C语言课程的后端&#xff0c;讲完指针和标准文件IO处理&#xff0c;我会做出一个难度较大练习&#xff0c;题目就是&#xff0c; 利用标准的目录处理函数 opendir/readdir/closedir实现类似于 scandir的功能。其中接口要scandir 函数一致。 这个题目看起来简单&#xff0c;实…

5G物联网设备,防止黑客入侵是首要问题

5G IoT设备预计2023年将达到4900万台&#xff0c;研究人员启动了一些程序来防止IoT成为渗透的黑洞。开放标准被认为可以推动物联网设备的互操作性&#xff0c;从而使网络安全软件可以在整个网络中查询设备。许多供应商甚至希望在物联网节点中安装应用程序或代理。毕竟所有移动设…