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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
页面点击小红心js实现代码
May 26 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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开发文件系统实例讲解
2006/10/09 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php构造函数与析构函数
2016/04/23 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
Javascript 模式实例 观察者模式
2009/10/24 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
JS功能代码集锦
2016/05/04 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python中web框架的自定义创建
2019/09/08 Python
python 实现二维列表转置
2019/12/02 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python 实现逻辑回归
2020/12/30 Python
小学生新学期寄语
2014/01/19 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
活动总结格式范文
2014/04/26 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
责任书格式
2015/01/29 职场文书
送达通知书
2015/04/25 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫