主要使用jszip插件
npm i [email protected] --save
主要代码如下
//打包后的包名
var blogTitle =this.form.testList.name;
var zip =new JSZip();
var imgs = zip.folder(blogTitle);
var baseList = [];
var imgNameList = [];
var arr = [];
downloadData.forEach(item => {
//图片名称
imgNameList.push(item.schoolname)
//图片地址
arr.push(item.qrcode)
})
// imgNameList = ['logo','user']
// arr = [logo, user]
for (var i =0; i < downloadData.length; i++) {
let image =new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload =function () {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL(); // 得到图片的base64编码数据
canvas.toDataURL('image/png');
baseList.push(url.substring(22)); // 去掉base64编码前的data:image/png;base64,
if (baseList.length === arr.length && baseList.length >0) {
for (let k =0; k < baseList.length; k++) {
imgs.file(imgNameList[k] +'.png', baseList[k], {base64:true})
}
zip.generateAsync({type:'blob'}).then(function (content) {
// see FileSaver.js
saveAs(content, blogTitle +'.zip');
}).catch(er => {
console.log(er)
})
}
};
image.src = arr[i];
}
在使用上述代码后遇到一个bug，图片名称与实际图片总是不符，后发现是onload异步问题，使用递归代替for循环解决了这个问题，代码如下
//打包后的包名
let blogTitle =this.form.testList.name;
let zip =new JSZip();
let imgs = zip.folder(blogTitle);
let baseList = [];
let imgNameList = [];
let arr = [];
downloadData.forEach(item => {
//图片名称
imgNameList.push(item.schoolname)
//图片地址
arr.push(item.qrcode)
})
//解决onload异步问题
function f(i,j) {
let image =new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload =function () {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL(); // 得到图片的base64编码数据
canvas.toDataURL('image/png');
baseList.push(url.substring(22));// 去掉base64编码前的data:image/png;base64,
if (baseList.length === j && baseList.length >0) {
for (let k =0; k < baseList.length; k++) {
imgs.file(imgNameList[k] +'.png', baseList[k], {base64:true})
}
zip.generateAsync({type:'blob'}).then(function (content) {
// see FileSaver.js
saveAs(content, blogTitle +'.zip');
}).catch(er => {
console.log(er)
})
}else {
i = i +1
f(i,j)
}
};
image.src = arr[i];
}
f(0,arr.length)
}
使用递归方法下载速度就会降低，为了解决这个问题，修改了一下方法，把名称和地址放到一个对象中，这样可以解决名称和地址不一致的问题
for (let i =0; i < downloadData.length; i++) {
let image =new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
console.log(image)
image.onload =function () {
console.log(image)
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL(); // 得到图片的base64编码数据
canvas.toDataURL('image/png');
downloadData.forEach(item => {
if(image.src == item.qrcode) {
// baseList.push(url.substring(22));// 去掉base64编码前的data:image/png;base64,
item.baseList = url.substring(22)
baseList.push(' ')
}
})
console.log(downloadData)
if (baseList.length === downloadData.length && baseList.length >0) {
for (let k =0; k < baseList.length; k++) {
imgs.file(downloadData[k].schoolname +'.png', downloadData[k].baseList, {base64:true})
}
zip.generateAsync({type:'blob'}).then(function (content) {
// see FileSaver.js
saveAs(content, blogTitle +'.zip');
}).catch(er => {
console.log(er)
})
}
};
image.src = downloadData[i].qrcode;
}