​关于兼容性问题:

  <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批量下载文件的更多相关文章

  1. 批量下载文件web

    最近需要这个所以写了一个例子一般批量下载由以下步骤组成: 1.确定下载的源文件位置 2.对文件进行打包成临时文件,这里会用到递归调用,需要的嵌套的文件夹进行处理,并返回文件保存位置 3.将打包好的文件 ...

  2. C#异步批量下载文件

    C#异步批量下载文件 实现原理:采用WebClient进行批量下载任务,简单的模拟迅雷下载效果! 废话不多说,先看掩饰效果: 具体实现步骤如下: 1.新建项目:WinBatchDownload 2.先 ...

  3. Java批量下载文件并zip打包

    客户需求:列表勾选需要的信息,点击批量下载文件的功能.这里分享下我们系统的解决方案:先生成要下载的文件,然后将其进行压缩,生成zip压缩文件,然后使用浏览器的下载功能即可完成批量下载的需求.以下是zi ...

  4. java批量下载文件为zip包

    批量下载文件为zip包的工具类 package com.meeno.trainsys.util; import javax.servlet.http.HttpServletRequest; impor ...

  5. asp.net怎样实现批量下载文件(非打包形式下载)

    问题: 我想实现的是一个一个的下载. 比如我有一个文件列表.通过checkbox选择.通过单击下载按钮下载选中文件. 百度到都是用打包形式实现批量下载. 这是我自己写的代码,但是点击下载后只能下载一个 ...

  6. php批量下载文件

    最近用codeigniter开发一个图片网站,发现单文件下载很容易实现,批量下载的话,就有点麻烦. 普通php下载比较简单,比如我封装的一个函数: function shao_download($fi ...

  7. python_crawler,批量下载文件

    这个第一个python3网络爬虫,参考书籍是<python网络数据采集>.该爬虫的主要功能是爬取某个网站,并将.rar,.doc,.docx,.zip文件批量下载. 后期将要改进的是,用后 ...

  8. PowerShell 实现批量下载文件

    简介 批量文件下载器 PowerShell 版,类似于迅雷批量下载功能,且可以破解 Referer 防盗链 源代码 [int]$script:completed = 0 # 下载完成数量 [int]$ ...

  9. ASP.NET批量下载文件的方法

    一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...

随机推荐

  1. TZOJ数据结构实验:左叶子之和

    int sumOfLeftLeaves(struct TreeNode* root) { if (root == NULL) { ; }//递归结束条件 if (root->left & ...

  2. go 实现每次生成不同随机值

    直接使用rand.Intn(10) 多次运行发现每次的随机值都是一样的 查看 Intn方法的源码说明 // Intn returns, as an int, a non-negative pseudo ...

  3. 怎样在数组处理方法中使用this

    回调函数中的this不做处理的话, this仍然会指向window, 解决方法有两种. 第一种: 使用另一个变量固定this, 适用于在对象方法中使用的情况. var obj = { arr: [1, ...

  4. Docker相关环境全套安装文档兼小技能

    Docker相关环境全套安装文档兼小技能 以下环境皆为ubuntu16.04,主要安装docker,docker-compose,docker仓库等. Docker安装 参考官方 A: 有源安装 Ub ...

  5. 在论坛中出现的比较难的sql问题:1(字符串分拆+行转列问题 SQL遍历截取字符串)

    原文:在论坛中出现的比较难的sql问题:1(字符串分拆+行转列问题 SQL遍历截取字符串) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方 ...

  6. Entity Framewrok Migration 重置

    转载自:https://weblog.west-wind.com/posts/2016/jan/13/resetting-entity-framework-migrations-to-a-clean- ...

  7. .NET CORE 下 MariaDB DBfirst 生成model层 并配置连接参数

    1.首先新建一个类库,然后通过NuGet安装下面三个包 2.然后在程序包管理器控制台中运行以下代码(ps:记得默认项目选择刚才新建的项目,同时设置为启动项) server 是服务器地址 databas ...

  8. 如何禁止Chrome浏览器隐藏URL的WWW前缀

    如何禁止Chrome浏览器隐藏URL的WWW前缀 一.打开Chrome浏览器 二.在Chrome浏览器的地址栏中输入以下内容并回车: chrome://flags/#omnibox-ui-hide-s ...

  9. kong命令(三)route

    介绍 route 是一套匹配客户端请求的规则.每个route都会匹配一个service,每个service可定关联多个route. 可以说service:route=1:n.一对多的关系.每个匹配到r ...

  10. MySql8.0 安装重要的两步。

    1.去官网下载mysql社区版 windows安装包. 2.在安装包 安装的过程中,有一步就是启动mysql 会失败: 然后修改服务后,再次回到安装界面点击:execute,就会成功了. 先去配置一下 ...