因为公司后端忙得无法给批量下载的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. LC 752 Open the Lock

    由于这个问题,涉及了很多知识,例如数据结构里面的哈希表,c++中的迭代器,因此,需要对于每一个疑惑逐一击破. 问题描述 You have a lock in front of you with 4 c ...

  2. 深入15个HTML元素方法,你见过吗?

    虽然现代化的 web 开发更多地依赖各种 MVC 框架,但开发者仍需要熟练掌握 HTML 与 DOM 方面的基础知识.不过,即使是有着多年经验的前端开发者,也会遇到一些不明所以的情况.本文首先将为初学 ...

  3. OVS+Docker

    两台机器操作一样就是IP不同但是设置都是相同的: A机器:192.168.71.142 docker0:172.17.42.1 B机器:192.168.71.136 docker0:172.17.43 ...

  4. Linux Too many open files

    Linux Too many open files 查看系统资源限制信息: sudo -s -u root -H id sudo -s lsof | awk '{ print $2 " &q ...

  5. kali破解ssh

    hydra,是一个非常好用的暴力破解工具,而且名字也很cool. 下面是官网上的介绍: AFP, Cisco AAA, Cisco auth, Cisco enable, CVS, Firebird, ...

  6. Selenium 基本使用

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.c ...

  7. 向PHP使用Post方式上传文件

    欢迎访问我的个人博客,获取更多有用的东西 链接一 链接二 也可以关注我的微信订阅号:CN丶Moti 1.post-file.html form表单提交方式一定要是post,而且添加属性enctype= ...

  8. Mycat1.6启动报NumberFormatException解决方案(server内存太大)

    https://blog.csdn.net/lijieshare/article/details/84826280 2019-09-02 18:28:27,829 [ERROR][main] 2019 ...

  9. 前端imageBuffer设置图片src(后端返回二进制流图片)

    参考地址1:前端imageBuffer设置图片src(后端到前端直传buffer) 参考地址2:axios根据流生成图片 本质为buffer转base64 // 获取项目截图 getItemPic() ...

  10. 原创博客>>>解决粘包问题的方法

    目录 原创博客>>>解决粘包问题的方法 原创博客>>>解决粘包问题的方法 服务端: import socket import struct service=sock ...