1、前端展示效果

2、前端代码

第一步：安装jszip 、file-saver

cnpm install jszip
cnpm install file-saver

第二步：导入jszip 、file-saver

 import JSZip from 'jszip'import FileSaver from "file-saver"

第三步：展示代码

  <!--查看照片--><el-dialog title="查看照片" :visible.sync="watchPohotVisible" width="40%" :close-on-click-modal="false"><div align="right"><el-button icon="el-icon-download" type="primary"  @click="downImg">图片下载</el-button></div><div><el-form><el-form-item><div  style="width: 100%;margin-top: 40px;" v-if="galleryRefresh"><divclass="image"v-for="(image, imageIndex) in images":key="imageIndex"@click="index = imageIndex":style="{ backgroundImage: 'url(' + image.thumbnail + ')', width: '200px', height: '200px'}"></div></div></el-form-item></el-form></div></el-dialog>

第四步：下载方法

 //通过url 转为blob格式的数据getImgArrayBuffer(url){let _this=this;return new Promise((resolve, reject) => {//通过请求获取文件blob格式let xmlhttp = new XMLHttpRequest();xmlhttp.open("GET", url, true);xmlhttp.responseType = "blob";xmlhttp.onload = function () {if (this.status == 200) {resolve(this.response);}else{reject(this.status);}};xmlhttp.send();});},// imgDataUrl 数据的url数组downImg() {let _this = this;let zip = new JSZip();let cache = {};let promises = [];_this.title = '正在加载压缩文件';for (let item of this.images) {const promise= _this.getImgArrayBuffer(item.href).then(data => {// 下载文件, 并存成ArrayBuffer对象(blob)zip.file(item.title, data, { binary: true }); // 逐个添加文件cache[item.title] = data;});promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then(content => {_this.title = '正在压缩';// 生成二进制流FileSaver.saveAs(content, '照片'); // 利用file-saver保存文件  自定义文件名_this.title = '压缩完成';});}).catch(res=>{_this.$message.error('文件压缩失败');});},

参考 vue将文件/图片批量打包下载

vue 批量下载图片并打包成zip包相关推荐

java实现批量下载图片并打包成zip
今天项目经理让做一个功能,就是批量下载图片,整体思路简单,但遇到了一个坑,需求是根据勾选的checkbox,点击下载按钮,弹出选择不同规格的图片对话框,并在下载完成后关闭对话框.坑就在下载完成后关闭对 ...
Java实现批量下载图片，打包成zip压缩包
/*** 批量下载图片后台逻辑* @return*/ @GetMapping("/downLoad") public void download(HttpServletReques ...
java 批量下载图片并打包成zip压缩包
项目需求: 对接第三方接口时,因为数据中存储的是图片链接,第三方审核时需要把所有图片以zip压缩包的方式传入到他们ftp服务中. 提示:以下是本篇文章正文内容,下面案例可供参考话不多说直接看代码,案 ...
批量下载文件，打包成zip压缩包
批量下载文件,用程序打成zip压缩包在下载前台传来要下载的url数组 @RequestMapping(value = "/download",method = RequestMe ...
java后台批量下载文件并压缩成zip下载
因项目需要,将服务器上的图片文件压缩打包zip,下载到本地桌面. 首先,前端js: function doQueryPic() {var picsDate = $("#picsDate&qu ...
将文件打包成zip包
参考:http://brushupo.i.sohu.com/blog/view/161729800.htm zip下载代码: package com.util;import java.io.Buffe ...
java 二进制包_如何用JAVA把内存里的二进制文件打包成ZIP包
import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.ut ...
JavaScript前端批量下载图片文件打包下载
参考:https://blog.csdn.net/qdm13209211861/article/details/126668206 参考代码在获取base64的时候有图片失真的问题.下面的代码已经修复 ...
java 批量下载图片，批量打包文件并下载
1.批量下载网页上,动态生成的图片到服务器上指定的目录中 2.将目录中的所有的图片打包成zip包 3.删除原来的目录 4.下载zip包 1:由于网页上的图片是全部都是连接动态生成的,所以同事在网上找了 ...
python打包zip文件_python 解压文件，合并文件打包成zip格式文件生成MD5值
#!/usr/bin/env python #_*_encoding:utf-8 # 2018/05/29 #augustyang #2.0 ''' 解压文件,合并文件打包成zip格式文件生成MD ...

vue 批量下载图片并打包成zip包

vue 批量下载图片并打包成zip包

1、前端展示效果

2、前端代码

vue 批量下载图片并打包成zip包相关推荐

最新文章

热门文章