简介:JavaScript点击下载功能是指用户在网页上点击某个链接或按钮后,浏览器会自动下载相应的文件。这个功能通常用于让用户方便地下载文件,比如下载文档、图片、音频、视频等。这里来简单记录一下
JavaScript ~ 第 3 篇 —— JavaScript点击下载功能
一. 点击下载实现步骤?
-
第一步:首先点击下载事件时创建一个a标签;
-
第二步:将a标签隐藏;
-
第三步:给a标签添加下载链接 "域名+接口+参数"(拼接下载地址和参数);
-
第四步:给a标签添加一个download属性,属性值就是文件名称否则下载出来的文件是没有属性的( 代码中,name会有斜杠,但不影响使用);
-
第五步:将上面创建的a标签加入到body的尾部;
-
第六步:最后执行a标签。
二. 详细过程,代码如下
//点击时的下载事件
choseDownload(fileId, fileType) {
//首先点击下载事件时创建一个a标签
let link = document.createElement("a");
//将a标签隐藏
link.style.display = "none";
//给a标签添加下载链接 "域名+接口"
//safe是一个动态的域名(safe是ip地址,需要自己定义)
//后面拼接的是接口,替换成你自己的下载接口和需要传递的参数
link.href = this.safe +`/common/download?fileId=` + fileId + "&type=" + fileType;
// 此处给a标签添加一个download属性,属性值就是文件名称否则下载出来的文件是没有属性的
//下面代码,name会有斜杠,不影响使用
link.setAttribute("download", name);
//将上面创建的a标签加入到body的尾部
document.body.appendChild(link);
//最后执行a标签
link.click();
},
创作不易,感觉有用,就一键三连,感谢(●'◡'●)