zoukankan
html css js c++ java
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/
查看全文
相关阅读:
linux 压力测试工具之ab
docker save load export import的区别
手把手教你打造高效的 Kubernetes 命令行终端
K8S 中的容器编排和应用编排
linux mount一个目录到另外一个目录
linux sed命令详解
各种安全证书间的关系及相关操作
Linux Shell/Bash wildcard通配符、元字符、转义符使用
vim打开多个文件、同时显示多个文件、在文件之间切换
吉他演奏中的速度与节拍
原文地址:https://www.cnblogs.com/songsu/p/11303697.html
最新文章
Firemonkey Button 颜色
Android模拟器
MyEclipse 配置Android环境
MyEclipse 生成APK文件
FireMoneky 画图 Point 赋值
Win10 安装 及应用遇到的问题
TMapCoordinate
IOS 上架要求视频及屏幕截屏
Delphi Firemonkey Button ImageList
win10 切换语言英文版
热门文章
jfinal如何设置使用哪种模板引擎(视图)
idea正则表达式查找代码的方法
纯HTML自动刷新页面或重定向(http-equiv属性的refresh)
struts2的action如果返回null会怎样
struts2的占位符*在action中的配置方法
jfinal的controller默认访问的方法是什么
java如何发起https请求
chrome inspect 离线调试-工具包 怎么使用
ehcache加载配置文件ehcache.xml的源码
JFinal的启动源码解读
Copyright © 2011-2022 走看看