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'
代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/**文件打包
* 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 生成二维码并且批量打包下载代码
我就废话不多说了，大家还是直接看代码吧~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<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的教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/ziyue7575/p/5de6777a2c304e152b51c719c8d36c63.html