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 多级下拉菜单核心代码
May 21 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
layui实现动态和静态分页
Apr 28 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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
基于mysql的bbs设计(二)
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
js实现简单模态框实例
2018/11/16 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
运动会表扬稿大全
2014/01/16 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
安全标语口号
2014/06/09 职场文书
简历中自我评价范文
2015/03/11 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python