因为公司后端忙得无法给批量下载的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. c++学习笔记之函数重载和模板理解

    1.函数重载: C++ 不允许变量重名,但是允许多个函数取相同的名字,只要参数表不同即可,这叫作函数的重载(其英文是 overload).重载就是装载多种东西的意思,即同一个事物能完成不同功能. 所谓 ...

  2. PHPRedis教程之geo

    前言 支持 GEO 系列命令的 Redis 版本从 3.2.0 起开始才可以使用,所以之前版本就不要想了. 函数列表 geoadd - 将指定的地理空间项(纬度,经度,名称)添加到指定的键, 数据作为 ...

  3. 基于全备份+binlog方式恢复数据

    基于全备份+binlog方式恢复数据 将bkxt从库的全备份在rescs5上恢复一份,用cmdb操作 恢复全备后执行如下操作 set global read_only=OFF; stop slave; ...

  4. http请求之of_ordering_json

    //Public function of_ordering_json (string as_json,ref string as_jsons[]) returns integer //string a ...

  5. luogu题解P2486[SDOI2011]染色--树链剖分+trick

    题目链接 https://www.luogu.org/problemnew/show/P2486 分析 看上去又是一道强行把序列上问题搬运到树上的裸题,然而分析之后发现并不然... 首先我们考虑如何在 ...

  6. O029、教你看懂OpenStack日志

    参考https://www.cnblogs.com/CloudMan6/p/5456484.html   instance 从创建到删除的整个生命周期都是有 Nova 管理的,后面各小节我们以inst ...

  7. js获取图片信息

    网络图片: fetch(item.path).then(function(res){ // 计算图片大小 return res.blob() }).then(function(data){ conso ...

  8. 封装一些简单的 dom 操作

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 【漏洞分析】Discuz! X系列全版本后台SQL注入漏洞

    0x01漏洞描述 Discuz!X全版本存在SQL注入漏洞.漏洞产生的原因是source\admincp\admincp_setting.php在处理$settingnew['uc']['appid' ...

  10. Oracle层次查询start with connect by

    博客参考:https://www.cnblogs.com/jerryxing/articles/2339352.html start with connect by 层次查询(Hierarchical ...