js批量下载文件
关于兼容性问题:
<a href="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 style="display: none;" 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批量下载文件的更多相关文章
- 批量下载文件web
最近需要这个所以写了一个例子一般批量下载由以下步骤组成: 1.确定下载的源文件位置 2.对文件进行打包成临时文件,这里会用到递归调用,需要的嵌套的文件夹进行处理,并返回文件保存位置 3.将打包好的文件 ...
- C#异步批量下载文件
C#异步批量下载文件 实现原理:采用WebClient进行批量下载任务,简单的模拟迅雷下载效果! 废话不多说,先看掩饰效果: 具体实现步骤如下: 1.新建项目:WinBatchDownload 2.先 ...
- Java批量下载文件并zip打包
客户需求:列表勾选需要的信息,点击批量下载文件的功能.这里分享下我们系统的解决方案:先生成要下载的文件,然后将其进行压缩,生成zip压缩文件,然后使用浏览器的下载功能即可完成批量下载的需求.以下是zi ...
- java批量下载文件为zip包
批量下载文件为zip包的工具类 package com.meeno.trainsys.util; import javax.servlet.http.HttpServletRequest; impor ...
- asp.net怎样实现批量下载文件(非打包形式下载)
问题: 我想实现的是一个一个的下载. 比如我有一个文件列表.通过checkbox选择.通过单击下载按钮下载选中文件. 百度到都是用打包形式实现批量下载. 这是我自己写的代码,但是点击下载后只能下载一个 ...
- php批量下载文件
最近用codeigniter开发一个图片网站,发现单文件下载很容易实现,批量下载的话,就有点麻烦. 普通php下载比较简单,比如我封装的一个函数: function shao_download($fi ...
- python_crawler,批量下载文件
这个第一个python3网络爬虫,参考书籍是<python网络数据采集>.该爬虫的主要功能是爬取某个网站,并将.rar,.doc,.docx,.zip文件批量下载. 后期将要改进的是,用后 ...
- PowerShell 实现批量下载文件
简介 批量文件下载器 PowerShell 版,类似于迅雷批量下载功能,且可以破解 Referer 防盗链 源代码 [int]$script:completed = 0 # 下载完成数量 [int]$ ...
- ASP.NET批量下载文件的方法
一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...
随机推荐
- Once in a casino CodeForces - 1120B (暴力)
大意: 给定两个字符串$a,b$, 每个字符为$0-9$, 每次操作将$a$中相邻两位加$1$或减$1$, 操作后每个数仍要为$0-9$, 求最少操作使$a$变成$b$. 先不考虑范围, 判断是否成立 ...
- MD5加密处理
无论传送过程和存储方式,都是以明文的方式,很不安全!一旦泄漏,将会造成很大的损失! 插件名称jQuery.MD5.js: /** * jQuery MD5 hash algorithm functio ...
- MyCat 插件 的应用
什么是MyCat MyCAT是一款由阿里Cobar演变而来的用于支持数据库,读写分离.分表分库的分布式中间件.MyCAT支持Oracle.MSSQL.MYSQL.PG.DB2关系型数据库,同时也支持M ...
- MySQL 常用函数介绍
MySQL 基础篇 三范式 MySQL 军规 MySQL 配置 MySQL 用户管理和权限设置 MySQL 常用函数介绍 MySQL 字段类型介绍 MySQL 多列排序 MySQL 行转列 列转行 M ...
- VS App_Code文件夹下的类文件不能直接被调用的解决方法
如下图所示,新建的类不能直接使用,会显示报错,检查命名空间什么的,未果 通过百度搜索,发现这么一篇文章:https://blog.csdn.net/younghaiqing/article/detai ...
- jQuery_jQuery的基本使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [学习笔记]pb_ds库
前言 其实我很早开始就用pb_ds库了,用起来确实方便.但最近感觉还是对这个了解颇少,还是来补一下 话说有人会忘记头文件,其实这有个伎俩,找到电脑上的g++文件夹.Ubuntu应该在etc中,Wind ...
- 11.ForkJoinPool 分支/合并框架 (工作窃取)
/*ForkJoinPool 分支/合并框架 (工作窃取)*/ Fork/Join 框架:就是在必要的情况下,将一个大任务,进行拆分(fork) 成若干个小任务(拆到给出的临界值为止),再将一个个的小 ...
- springboot系列(五) 静态资源处理
转载:https://www.cnblogs.com/magicalSam/p/7189476.html 1.静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户通过浏览器直接读取. ...
- GNS3 介绍
什么是GNS3? GNS3是一款模拟CISCO网络设备的模拟器,和CPT(Cisco Packet Tracer)相比.GNS3运行的是真实设备的IOS,命令集更全,在如有部分有非常好的表现,交换部分 ...