字符串生成二维码并且批量打包下载

所需依赖包
qrcode 二维码生成的插件库
jszip 用来打包压缩的一个库
file-saver 文件保存下载的插件库

npm install jszip
npm install file-saver
npm install qrcode
1
2
3

思路
qrcode 能直接将字符串生成二维码图片的 base64 格式
将二维码图片的 base64 整合放入到 JSZip 对象里
最后生成 zip 文件并通过 file-saver 下载到本地

函数方法和使用

<template>
	<div >
	      <el-button @click="btn">按钮</el-button>
	 </div>

</template>

<script>
	
	import JSZip from "jszip";
	import FileSaver from "file-saver";
	import QRCode from "qrcode";
	export default{
		methods:{
			/**
			 * 将字符串生成二维码并且转成base64
			 * @param {要生成二维码的字符串} text
			 * @returns
			 */
			textQrcodeToBase64(text) {
			  return new Promise((res, rej) => {
			    QRCode.toDataURL(
			      text, // 二维码字符串
			      {
			        type: "image/png", // 生成dataurl图片格式
			        width: 200, // 二维码宽度
			        quality: 0.8, // 质量
			        margin: 1, // 白边大小
			        color: {
			          dark: "#000", // 暗色颜色
			          light: "#fff", // 亮色颜色
			        },
			      },
			     (err, dataUrl)=> {
			        if (err) rej(err);
			        res(dataUrl.substring(22)); // substring(22)是去掉图片base64头
			      }
			    );
			  });
			},
			
			/**
			 * 将base64字符串以png格式装进jszip, 然后下载保存到本地
			 * @param {Array} data {value: base64字符串, name: 二维码的名字}
			 */
			 dataUrlZip(data) {
			  const zip = new JSZip();
			
			  for (const item of data) {
			    const { value, name } = item;
			    zip.file(name + ".png", value, {
			      base64: true,
			    });
			  }
			
			  // 以二进制形式保存、并且通过file-saver下载到本地
			  zip.generateAsync({ type: "blob" }).then( (content) =>{
			    FileSaver.saveAs(content, "qrcodes.zip");
			  });
			},
			async btn(){
				// 注意: textQrcodeToBase64返回对象是promise
				
				  // 二维码字符串相关的数据
				  const qrStrArr = [
				    { name: "baidu", url: "http://www.baidu.com" },
				    { name: "npm", url: "https://www.npmjs.com/" },
				  ];
				
				  // 生成下载数据
				  const data = [];
				  
				  for (const item of qrStrArr) {
				    const base64 =await  this.textQrcodeToBase64(item.url);
				    data.push({
				      name: item.name,
				      value: base64,
				    });
				  }
				
				  // 下载
				  this.dataUrlZip(data);
			
			}
		}
	}
</script>
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