js批量下载文件

摘要:
单个文件批量下载方法一:H5新特性HTML5里面为标签添加了一个download的属性,我们可以轻易的利用它来实现下载功能。download的属性值是可选的,它用来指定下载文件的文件名。1Downloadfile方法二:jsjs实现的思路是:1、添加标签用JavaScript创建一个隐藏的标签设置它的href属性设置它的download属性用JavaScript来触发这个它的click事件实现代码:假设引入了jquery.jsvara=document.createElement('a');varurl=window.URL.createObjectURL;varfilename='what-you-want.txt';a.href=url;a.download=filename;a.click();a.remove();//移除掉2、如果不用H5新特性,动态添加会独立打开一个窗口,发起该请求,当请求完成后,该界面会自动关闭。

​关于兼容性问题:
  <a href="http://t.zoukankan.com/xxx.docx" target='_blank'></a>
  下载文件时,这种写法是没有兼容性问题;但是下载图片时,IE 上会出现当前页面直接打开图片的问题,即便是加了 target='_blank'。
单个文件批量下载
方法一:H5 <a> 新特性
  HTML 5 里面为 <a> 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能。download 的属性值是可选的,它用来指定下载文件的文件名。
1
<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>
  
方法二:js
js 实现的思路是:
1、添加 <a>标签
用 JavaScript 创建一个隐藏的 <a> 标签
设置它的 href 属性
设置它的 download 属性
用 JavaScript 来触发这个它的 click 事件
实现代码:假设引入了 jquery.js
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = 'what-you-want.txt';
a.href = url;
a.download = filename;
a.click();
a.remove(); // 移除掉 <a>
2、如果不用 H5 新特性,动态添加 <iframe>
  会独立打开一个窗口,发起该请求,当请求完成后,该界面会自动关闭。
1 var frame = $('<iframe class="multi-download"></iframe>');
2 frame.attr('src', url);
3 $(document.body).append(frame);
4 setTimeout(function() {
5 frame.remove();
6 }, 1000);
兼容 IE 360兼容模式:
如果文件不是 .png .gif .jpg 这种照片格式,可采用 window.open(url, '_blank') 下载。
function isIE () {
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
return true
} else {
return false
}
},
function download () {
let url = '../../../static/cds/files/研究方案及团队情况表.docx'
if (this.isIE()) { // IE
window.open(url, '_blank')
} else {
let a = document.createElement('a') // 创建a标签
let e = document.createEvent('MouseEvents') // 创建鼠标事件对象
e.initEvent('click', false, false) // 初始化事件对象
a.href = url // 设置下载地址
a.download = 'xxxx表' // 设置下载文件名
a.dispatchEvent(e)
}
},
批量下载多个文件:
思路:将 url 放在一个数组里,循环数组并触发下载:
let files = ['url1', 'url2'] // 所有文件
files.forEach(url => {
if (this.isIE()) { // IE
window.open(url, '_blank')
} else {
let a = document.createElement('a') // 创建a标签
let e = document.createEvent('MouseEvents') // 创建鼠标事件对象
e.initEvent('click', false, false) // 初始化事件对象
a.href = url // 设置下载地址
a.download = '' // 设置下载文件名
a.dispatchEvent(e)
}
})
​详细配置信息可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/28/php%e6%96%87%e4%bb%b6%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/

免责声明:文章转载自《js批量下载文件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Java定时任务Python内存泄漏下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS === 实现简易调色板

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin:0;padding:0;} .box{ 500px;height: 400px;...

JS获取当前时间

用JS获取当前时间,并且对此时间进行分解和重组,以不同的形式返回,代码如下所示: function GetCurrentTime(flag) {var currentTime = "";var myDate = new Date();var year = myDate.getFullYear();var month = parseInt(myDate.ge...

js-定时器

知识 要用定时器,先清除定时器   1、 定时器   setInterval() 循环定时器;周而复始的执行(循环执行)  setTimeout()( 执行事件,间隔时间(单位毫秒)) <script> var num=0; setInterval(function(){ console.log( num);...

Docker 创建 mongo 容器

一、1、直接获取 docker 认证 mongo 镜像: docker pull mongo 2、创建运行 mongo 容器: docker run -d -it -p 127:27017 --name mongo3 -m 512M -v /data/docker-file/mongo3/db3:/data/db docker.io/mongo -p  ...

中文前端UI框架Kit(十三)使用RequireJs托管你的类库和js代码

号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题 kit内置支持requireJs托管,可以使用requireJs加载和管理KitJs框架内的所有组件和类库 最近园子里有很多讨论requireJs(http://requirejs.org/)的兄弟,requireJs托管js代码的好处有 1.通过闭包提供了一个...

在css使用自定义字体

在css文件中通过@font-face自定义字体,src 为字体文件的相对路径。 @font-face { font-family: "LED";//为字体取名字 src: url("fonts/HD_UnidreamLED.ttf") format('truetype');//字体文件 } //在样式中使用该字体 .led { font-size:50...