web批量下载文件

标签：模式   ie11   for   pat   script   ||   ant   use   obj   

关于兼容性问题：

  

  下载文件时，这种写法是没有兼容性问题；但是下载图片时，IE 上会出现当前页面直接打开图片的问题，即便是加了 target=‘_blank‘。

单个文件批量下载

 

方法一：H5 新特性

  HTML 5 里面为 标签添加了一个 download 的属性，我们可以轻易的利用它来实现下载功能。download 的属性值是可选的，它用来指定下载文件的文件名。

Download file

 

方法二：js

js 实现的思路是：

添加 标签

用 JavaScript 创建一个隐藏的 标签

设置它的 href 属性

设置它的 download 属性

用 JavaScript 来触发这个它的 click 事件

实现代码：假设引入了 jquery.js

var a = document.createElement(‘a‘);

var url = window.URL.createObjectURL(blob);

var filename = ‘what-you-want.txt‘;

href = url;

download = filename;

click();

remove(); // 移除掉

 

如果不用 H5 新特性，动态添加

  会独立打开一个窗口，发起该请求，当请求完成后，该界面会自动关闭。

 var frame = $(‘‘);

 frame.attr(‘src‘, url);

 $(document.body).append(frame);

 setTimeout(function() {

   frame.remove();

 }, 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) // 初始化事件对象

        href = url // 设置下载地址

        download = ‘xxxx表‘ // 设置下载文件名

        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) // 初始化事件对象

        href = url // 设置下载地址

        download = ‘‘ // 设置下载文件名

        dispatchEvent(e)

    }

})

 

使用down2的代码：

批量下载文件

    $("#btn-down-files").click(function () {

        if (downer.Config["Folder"] == "") { downer.open_folder(); return; }

        var urls = [

            { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }

            , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }

        ];

        downer.app.addUrls(urls);

    });

 

引入head头

    

    

    

    

    

    

    

    

    

 

详细配置信息可以参考我写的这篇文章：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/

 

web批量下载文件

标签：模式   ie11   for   pat   script   ||   ant   use   obj   

原文地址：https://www.cnblogs.com/songsu/p/13329100.html