所需依赖
实现该功能需要用到四个依赖:
qrcodejs2 :将url转换成二维码
tml2canvas: 将生成的二维码图片转换成Base64
jszip :将批量生成图片进行打包
file-saver :将生成压缩包下载 (也可用a链接下载)
安装
1.分别用npm install 依次安装,在需要的页面进行引入
2.模拟一组数据,实际可进行更改:
- 用npm install 依次进行安装,在需要的页面进行引入
import html2canvas from "html2canvas";
import JSZip from "jszip";
import FileSaver from "file-saver";
import QRCode from "qrcodejs2";
- 创建一组数据,模拟下载,根据需求进行替换
urlList: [
{ url: "http://www.aiqiyi.com", name: "爱奇艺" },
{ url: "http://www.youku.com", name: "优酷" },
{ url: "http://www.bilibili.com", name: "b站" },
{ url: "http://www.baidu.com", name: "百度" },
{ url: "http://www.baidu.com/asd", name: "百度12" },
{ url: "http://www.baidu.com/ccc", name: "百度33" },
]
- 在template中定义好容器
<div
id="code-box"
ref="qrCodeDiv"
style="position: absolute; left: -1000px; top: -1000px; z-index: -999"
>
<div
v-for="(item, index) in urlList"
:ref="'code' + index"
:id="'code' + index"
:key="index"
></div>
</div>
- 调用该方法进行下载
// 批量下载图片
downloadImg() {
// 初始化压缩包
var zip = new JSZip();
var img = zip.folder("images");
// 遍历url生成二维码
this.urlList.forEach((item, index, arr) => {
var qrcode = new QRCode("code" + index, {
width: 200, // 设置宽度
height: 200, // 设置高度
text: item.url,
});
// 将生成二维码转换为图片
html2canvas(document.querySelector("#code" + index), {
logging: false,
useCORS: true,
}).then((canvas) => {
var imgUrl = canvas.toDataURL("png");
// 需要对base64进行截取处理,否则无法顺利打包
var regex = /data:image\/.*;base64,/;
imgUrl = imgUrl.replace(regex, "");
// 添加进img
img.file(item.name + ".png", imgUrl, { base64: true });
this.$nextTick(() => {
// 判断如果为最后一张图片
if (index == arr.length - 1) {
zip.generateAsync({ type: "blob" }).then(function (content) {
// 调用api进行下载
FileSaver.saveAs(content, "二维码.zip");
});
}
});
});
});
},