因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法:

  1. 利用HTML download 属性
      var a = document.createElement('a');       //需要下载的数据内容,我这里放的就是BLOB,如果你有下载链接就不需要了       var url = window.URL.createObjectURL(content);       var filename = 'XXX.zip';       a.href = url;       a.download = filename;       a.click();       window.URL.revokeObjectURL(url); 
  1. Window对象
     window.location.href = "data:application/zip;"+content 
  1. 别人的库file-saver
    saveAs(content, new Date().getTime().toString()+".zip");

不过这种下载方式也有局限性,对文件的大小有限制,最后我分享一款很好用的插件大家参考一下,附上链接如下:

http://blog.ncmem.com/wordpress/2019/08/28/java%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/

效果截图:
​

js文件下载的更多相关文章

  1. js文件下载及命名(兼容多浏览器)

    函数功能:实现主流浏览器的文件下载功能: 兼容性: >=IE10,Edge,chrome,firefox; 与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实 ...

  2. 安卓请求服务器js文件下载到本地,版本号就下载

    <?phpreturn array('CJ_V' => 'v0.15',) <script src="/js/reserve.js?<?=C('CJ_V')?> ...

  3. FileSaver.js 文件下载

    安装: npm install file-saver --save 或者(需下载FileSaver.js文件) <script src="path/FileSaver.js" ...

  4. js 文件下载 进度条

    js: /** * 下载文件 - 带进度监控 * @param url: 文件请求路径 * @param params: 请求参数 * @param name: 保存的文件名 * @param pro ...

  5. js 文件下载

    工程WebApi: 点击按钮执行的handler exportClick() { var profile = { content: this.state.profile, type: MappingT ...

  6. js文件下载代码 import downloadjs from 'downloadjs'

    function logDownload(contribution_id) { setTimeout(function () { $.ajax({ url: "/ajax/Wallpaper ...

  7. node.js 文件下载

    //下载参数 var http = require("http"); var fs = require("fs"); var path = require(&q ...

  8. js 文件下载 兼容ie

    前置条件:后台接口返回二进制流文件 一.设置前端请求的的 responseType: 'blob' 二.接收请求数据并调用下载 var content = res.data // 接口返回的二进制流v ...

  9. js 文件下载进度监控

    var xhr = new XMLHttpRequest(); xhr.open('GET', '文件地址.mp4'); xhr.setRequestHeader("Content-type ...

随机推荐

  1. vue 评论 computed watch 分隔符 局部组件 全局组件 子传父消息|父传子消息

    评论案例 splice: (start 几位,替换(新增)内容) splice(0,0,内容)在头部插入内容 splice(0,1) 把索引为0的往后删除1位  splice(0,1,内容)把索引为0 ...

  2. 【求教 探讨】python tkinter的messagebox

    最近有一个要求,用python的tkinter制作一个messagebox,传入3个参数: title  text timeout.用户可以点击“确定” 关闭窗口:  或者 等待几秒(timeout) ...

  3. X86逆向10:学会使用硬件断点

    本节课我们将学习硬件断点的使用技巧,硬件断点是由硬件提供给我们的一组寄存器,我们可以对这些硬件寄存器设置相应的值,然后让硬件帮我们断在需要下断点的地址上面,这就是硬件断点,硬件断点依赖于寄存器,这些寄 ...

  4. RHEL8配置本地yum源

    在RHEL8中把软件源分成了两部分一个是BaseOS,一个是AppStream. 在Red Hat Enterprise Linux 8.0中,统一的ISO自动加载BaseOS和AppStream安装 ...

  5. linux查询cpu过高原因--java

    1. 查询java pid top -c 2. 查询java进程下,线程情况 top -Hp pid(threadIdList) 3. 将10进制线程id转为16进制 printf "%x ...

  6. eclipse 创建Java web项目 Cannot change version of project facet Dynamic web module to xxx

    问题描述: 用Eclipse创建Java web项目时选择的Artifact Id为maven-artchetype-webapp,由于这个archetype比较老,用的servlet还是2.3的. ...

  7. Comparable内部比较器 和 Comparator外部比较器

    1:Comparable a:基本数据类型封装类都继承了Comparable接口 b:TreeSet 和TreeMap集合默认是按照自然顺序排序的 c:继承类中实现compareTo()方法,在类内部 ...

  8. HashMap—— values() remove方法 containsKey()方法 containsValue()方法

    values()方法:看下面的实例,就是把所有的value值封装成一个connection型的数组 Map<Integer,Student> students=new HashMap< ...

  9. linq to xml运用示例

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  10. vuex store更新了数据,但未触发getters

    遇到一个奇怪的问题,我将数组存储在store中,更新数组,第一次会生效,第二次就不会再触发getters,通过检查发现state中的数组是有更新的. 尝试过网上很多的解决办法: 1.getters r ...