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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
浅析javascript的return语句
Dec 15 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
jQuery实现视频展示效果
May 30 jQuery
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php实现文件下载代码分享
2014/08/19 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python网络爬虫采集联想词示例
2014/02/11 Python
python模块之StringIO使用示例
2015/04/08 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python实现自动登录
2018/09/17 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python调用Redis的示例代码
2020/11/24 Python
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
致400米运动员广播稿
2014/02/07 职场文书
员工试用期自我评价
2014/09/18 职场文书
基层党员对照检查材料
2014/09/24 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014小学年度工作总结
2014/12/20 职场文书
初中家长意见
2015/06/03 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Python的property属性详细讲解
2022/04/11 Python