vue将文件/图片批量打包下载zip的教程
vue将文件/图片批量打包下载
各种格式都可以,只要url能够打开或者下载文件即可.
1.通过文件的url,使用js的XMLHttpRequest获取blob
2.将blob压缩为zip
由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒
添加依赖
//npm install jszip
//npm install file-saver
在页面的script中引入依赖
import JSZip from 'jszip'
import FileSaver from 'file-saver'
代码
/**文件打包 * arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}] * filename 压缩包名 * */ filesToRar(arrImages, filename) { let _this = this; let zip = new JSZip(); let cache = {}; let promises = []; _this.title = '正在加载压缩文件'; for (let item of arrImages) { const promise= _this.getImgArrayBuffer(item.fileUrl).then(data => { // 下载文件, 并存成ArrayBuffer对象(blob) zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件 cache[item.renameFileName] = data; }); promises.push(promise); } Promise.all(promises).then(() => { zip.generateAsync({ type: "blob" }).then(content => { _this.title = '正在压缩'; // 生成二进制流 FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名 _this.title = '压缩完成'; }); }).catch(res=>{ _this.$message.error('文件压缩失败'); }); }, //获取文件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(); }); },
补充知识:vue 生成二维码并且批量打包下载代码
我就废话不多说了,大家还是直接看代码吧~
<template> <div> <div v-show="codeId" ref="QrcodePage" style="z-index:-1111;position:absolute;left:-99999;width: 450px;height: 475px;background-size: cover;"> <div id="qrCode" v-if="codeId"> <QrcodeVue :logoSrc="imageUrl" :key="random" :callback="texte" :text="codeValue" :logoScale="50" :size="750"></QrcodeVue> <p style="text-align: center; font-size: 1.5625rem;">{{ codeNumber }}</p> </div> </div> </div> </template> <script> let loadingInstance = ''; import QrcodeVue from 'vue-qr'; import html2canvas from 'html2canvas'; import JSZip from 'jszip'; import FileSaver from 'file-saver'; export default { name: 'qrcode', components: { QrcodeVue }, data() { return { random: '1', codeId: '', qrcodeUrl: '', imageUrl: '', // imageUrl: 'https://shop.mmdddd.com/workShopWeb/static/img/72.png',//logo qrContentImage: '', codeValue: '', initCodeVal: 'http://xcx.nmte.net/tips/index.html', codeNumber: '', arr: [], qrcodeArr: [], index: 0 }; }, watch: { index(newName, oldName){ if(newName != oldName && newName <= this.arr.length-1){ setTimeout(_ => { this.setarr(this.arr); }, 0); }else { this.$nextTick(_ => { loadingInstance.close(); }); } } }, created() { }, mounted() {}, methods: { texte(url,qid) { setTimeout(_ => { this.createImgs(); }, 100); }, setarr(arr) { this.arr = arr; if(this.index > this.arr.length -1) { this.index = 0; } let index=this.index||0; loadingInstance = this.$Loading.service({ lock: true, text: '二维码码批量下载中,请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); this.codeNumber = this.arr[index].codeNumber; this.arr[index].codeId ? (this.codeId = this.arr[index].codeId) : this.$Message.warn('获取信息失败,请刷新重试'); this.codeValue = this.initCodeVal + '?codeId=' + this.arr[index].codeId + '&codeNumber=' + this.arr[index].codeNumber; this.random = Math.random(); }, createImgs() { var that = this; if(that.index <= that.arr.length -1 && that.codeId){ let shareContent = that.$refs.QrcodePage, width = shareContent.offsetWidth, height = shareContent.offsetHeight, canvas = document.createElement('canvas'), scale = 1; canvas.width = width * scale; canvas.height = height * scale; canvas.style.width = (shareContent.clientWidth * scale) / 100 + 'rem'; canvas.style.height = (shareContent.clientHeight * scale) / 100 + 'rem'; canvas.getContext('2d').scale(scale, scale); let opts = { scale: scale, canvas: canvas, logging: false, width: width, height: height, useCORS: true }; html2canvas(shareContent, opts) .then(function(canvas) { const qrContentImage = canvas.toDataURL('image/jpeg', 1.0); if(that.index <= that.arr.length -1 && that.codeId){ that.qrcodeArr.push({ url: qrContentImage, name: that.arr[that.index].codeNumber }); } if(that.codeId){ that.index ++; } if(that.qrcodeArr.length == that.arr.length){ that.packageImages(); that.codeId = null; } }) .catch(function(reason) { console.log(reason); }); } }, packageImages() { let that = this; const zip = new JSZip(); const cache = {}; setTimeout(_ => { let arr = that.qrcodeArr; arr.forEach((item,index)=>{ let fileName = item.name; zip.file(fileName + '.png',item.url.substring(22),{base64:true}) cache[fileName] = item.url }) zip.generateAsync({type:"blob"}).then(content => { FileSaver.saveAs(content, "二维码.zip") }) },0) } } }; </script> <style lang="less" scoped="scoped"> #qrCode { width: 375px; height: 375px; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); img { display: block; width: 100%; height: 100%; } } </style>
调用setarr传数组;
以上这篇vue将文件/图片批量打包下载zip的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了详解如何将c语言文件打包成exe可执行程序,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-25
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了C#实现HTTP下载文件的方法,包括了HTTP通信的创建、本地文件的写入等,非常具有实用价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13