vue 批量下载图片并打包成压缩包

第一步

npm install JSZip
npm install FileSaver

第二步

在使用的页面引入import JSZip from "jszip";
import FileSaver from "file-saver";

第三步

在 methods 里写入 getImgArrayBuffer(url) {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();});},//批量下载atchDownload() {// this.images 是要下载的图片数组  [{url: 图片地址, id: 图片名称}]// 定时器 loadingthis.loading = true;this.setTimeout = setTimeout(() => {this.loading = false;}, 2000);let _this = this;let zip = new JSZip();let cache = {};let promises = [];for (let item of this.images) {const promise = _this.getImgArrayBuffer(item.url).then((data) => {// 下载文件, 并存成ArrayBuffer对象(blob)zip.file(item.id + ".png", data, { binary: true }); // 逐个添加文件cache[item.id] = data;});promises.push(promise);}Promise.all(promises).then(() => {zip.generateAsync({ type: "blob" }).then((content) => {_this.$message("正在压缩，请稍后！");// 生成二进制流FileSaver.saveAs(content, "打包图片"); // 利用file-saver保存文件  自定义文件名_this.$message("压缩完成！");});}).catch((res) => {console.log("111111111111");});},

第四步

在标签上用点击事件触发 atchDownload( ) 函数

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

Java实现批量下载图片，打包成zip压缩包
/*** 批量下载图片后台逻辑* @return*/ @GetMapping("/downLoad") public void download(HttpServletReques ...
java实现批量下载图片并打包成zip
今天项目经理让做一个功能,就是批量下载图片,整体思路简单,但遇到了一个坑,需求是根据勾选的checkbox,点击下载按钮,弹出选择不同规格的图片对话框,并在下载完成后关闭对话框.坑就在下载完成后关闭对 ...
java 批量下载图片并打包成zip压缩包
项目需求: 对接第三方接口时,因为数据中存储的是图片链接,第三方审核时需要把所有图片以zip压缩包的方式传入到他们ftp服务中. 提示:以下是本篇文章正文内容,下面案例可供参考话不多说直接看代码,案 ...
批量下载文件，打包成zip压缩包
批量下载文件,用程序打成zip压缩包在下载前台传来要下载的url数组 @RequestMapping(value = "/download",method = RequestMe ...
前端批量下载文件、图片、打包成压缩包，JZip和file-saver
一.安装JZip和file-saver cnpm install file-saver jszip --save 二.导入 import { saveAs } from 'file-saver' im ...
JavaScript前端批量下载图片文件打包下载
参考:https://blog.csdn.net/qdm13209211861/article/details/126668206 参考代码在获取base64的时候有图片失真的问题.下面的代码已经修复 ...
【java】文件批量下载并压缩为zip压缩包
[java] 文件批量下载并压缩为zip压缩包 java常用的压缩技术 java中常见实现压缩与解压业务场景代码实现注意点 java常用的压缩技术常见的压缩格式有很多种,例如:zip.rar. ...
java后台批量下载文件并压缩成zip下载
因项目需要,将服务器上的图片文件压缩打包zip,下载到本地桌面. 首先,前端js: function doQueryPic() {var picsDate = $("#picsDate&qu ...
批量下载图片-免费批量下载图片软件
总有一些图片你想保存小周浏览了某个网页发现上面的有很多很漂亮的图片,于是想保存下来,开始一波疯狂操作:右键-->图片另存为....保存了50张图片后,手酸得不行了.使用这款图片批量下载软件不到 ...
vue的移动端项目打包成手机的app软件apk格式
目录前提准备: 1.vue项目npm run build打包成dist文件夹 2.注册hbuilderx账号,获取appid 步骤一.创建h5+app空模版二. 将打包完成生成dist文件目录复 ...

vue 批量下载图片并打包成压缩包

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

最新文章

热门文章