vue将文件/图片批量打包下载zip的教程


Posted in Javascript onOctober 21, 2020

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

各种格式都可以,只要url能够打开或者下载文件即可.

1.通过文件的url,使用js的XMLHttpRequest获取blob

2.将blob压缩为zip

由于异步并行加载文件,速度还是蛮快的,我141个4M多的图片,1分左右加载完成,49个4M的图片4秒

vue将文件/图片批量打包下载zip的教程

vue将文件/图片批量打包下载zip的教程

添加依赖

//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的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
javascript动态创建链接的方法
May 13 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
Javascript继承机制详解
May 30 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
You might like
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
灵泰克Java笔试题
2016/01/09 面试题
生产副总岗位职责
2013/11/28 职场文书
程序员求职信
2014/04/16 职场文书
我爱读书演讲稿
2014/05/07 职场文书
关于环保的标语
2014/06/13 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
施工安全协议书
2016/03/22 职场文书
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers