zoukankan      html  css  js  c++  java
  • js 实现多文件批量下载

    关于兼容性问题:

      <a href="xxx.docx" target='_blank'></a>

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

    2019.8.19 更 


    单个文件批量下载 

    方法一:H5 <a> 新特性

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

    <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)
            }
          })

    参考链接:

  • 相关阅读:
    [BFS][链表][二分][STL]JZOJ 5875 听我说,海蜗牛
    [SPFA]JZOJ 5869 绿洲
    [Splay]Luogu 3960 NOIP2017 列队
    [扩欧]JZOJ 5855 吃蛋糕
    [模拟退火][堆优化Prim]2017TG Day2 T2 宝藏
    [并查集]奶酪
    [容斥]JZOJ 5843 b
    JS Undefined 类型
    Python logging 模块
    14.浏览器屏幕缩放bug修复
  • 原文地址:https://www.cnblogs.com/zhangym118/p/11352164.html
Copyright © 2011-2022 走看看