需要使用到的技术:
import JSZip from "jszip";
import FileSaver from "file-saver";
使用函数,上代码
传入数据格式如下:
[{name:"你的图片名称,不能重复",baseImg:"后端传输给你的base64图片"}]
//批量下载门店二维码转化
StoreDowQrcode(arr, blogTitle = "二维码") {
var zip = new JSZip();
var imgs = zip.folder(blogTitle);
var baseList = [];
var _this = this;
//var arr = ["/images/bg.png", "/images/bg1.png"];
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i].name);
let name = arr[i].name; //图片名称
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编码数据 let url =
canvas.toDataURL("image/png");
baseList.push({ name: name, img: url.substring(22) });
if (baseList.length === arr.length) {
if (baseList.length > 0) {
_this.$notify({
title: "成功",
message: "即将下载",
type: "success"
});
for (let k = 0; k < baseList.length; k++) {
imgs.file(baseList[k].name + ".png", baseList[k].img, {
base64: true
});
}
zip.generateAsync({ type: "blob" }).then(function(content) {
// see FileSaver.js
FileSaver.saveAs(content, blogTitle + ".zip");
});
} else {
_this.$notify.error({
title: "错误",
message: "暂无图片可下载"
});
}
}
};
image.src = arr[i].baseImg = `data:image/png;base64,${arr[i].baseImg}`;
}
}
使用:
this.StoreDowQrcode(newarr);
上图代码中使用的技术主要为jszip,FileSaver.js,提示代码是elementUI所提供的组件
代码其实是拷贝的这个大神的博客中的代码,不是自己原创,但是修改了他所不是很明确的地方,根据我的博客是可以直接使用,不需要多余处理。这要是还不会用,那我也没有办法了。
本文参考链接:
博客:https://blog.csdn.net/haidong55/article/details/86503573
FileSaver:https://www.cnblogs.com/yunser/p/7629399.html
jszip:https://stuk.github.io/jszip/