JS读取EXCEL文件批量生成带描述的二维码并打包下载

JS读取EXCEL文件批量生成带描述的二维码并打包下载

三月 24, 2022 阅读量

起因是朋友二月上旬想让我做个程序，本来打算二月底给他弄一下的，结果赶上出差就搁置了。直到三月初出差回来，打算周末搞的，结果朋友在周末之前催，奈何时间太紧，决定当天JS快速搞一下，只实现了简单的功能。谁知朋友问的时候，已经找别人做好了……虽然有完成的，但是期间还找过我几次。最后不用我的，但觉得一直烂尾不好（第二次修改其实已经实现了大部分要求），今天就把未实现（打包下载）的坑填上，简单记录一下

用到的第三方JS库

JQuery就不说明了，这里根据需求还需要Base64编码
js-base64 https://github.com/dankogai/js-base64

主要代码

代码仅供参考，读取的文件对格式有要求，需要按照自己的需求来，这里就不列出对文本处理的部分了。

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
	<div>
		<span>①选择Excel文件(格式固定)：</span>
		</br>
		<input type="file" onchange="readWorkbookFromLocalFile(this.files[0])" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
		</br>
		<span>②二维码内容预览(可修改)：</span>
		</br>
		<textarea id="target" cols="100" rows="20"></textarea>
		</br>
		<span>③生成下载二维码：</span>
		</br>
		<button onclick="getQRImg()">生成下载二维码</button>
	</div>
	<div id="codeArea"></div>
</body>

读取Excel文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 读取Excel文件
function readWorkbookFromLocalFile(file, callback) {
	var reader = new FileReader();
	reader.onload = function(e) {
		var data = e.target.result;
		// 读取二进制的excel
		var workbook = XLSX.read(data, {type: 'binary'});
		var outText = XLSX.utils.sheet_to_txt(workbook.Sheets[workbook.SheetNames[0]]).replace(/\t/g, ',');
		// 去除最后一个换行符
		outText = outText.substring(0, outText.length -1);
		$("#target").val(outText);
		if(callback) callback(workbook);
	};
	reader.readAsBinaryString(file);
}

生成带描述的二维码并打包下载

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
var zip = new JSZip();
// 生成二维码
function makeQR(arr) {
	if (arr) {
		arr.reduce(function(per, current, index) {
			// 二维码页面显示(先生成html结构再生成二维码)
			var html = `<div id='code${index}' class='codeStyle'></div>`;
			$("#codeArea").append(html);
			var qrcode = $('#code' + index).qrcode({
				width: 140,
				height: 140,
				text: current
			});

			// 二维码添加文字描述
			var canvas = qrcode.find('canvas').get(0);
			var img = new Image();
			img.src = canvas.toDataURL('image/png');
			img.onload = function() {
				canvas.width = 140;
				canvas.height = 180;
				var ctx = canvas.getContext('2d');
				//设置画布背景
				ctx.fillStyle = '#ffffff';
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				//设置文字样式
				ctx.fillStyle = '#000000';
				ctx.font = 'bold ' + 14 + 'px Arial';
				ctx.textAlign = 'center';
				//文字描述
				ctx.fillText(nameList[index].split(' ')[0], 80, 155);
				ctx.font = '13px Arial';
				ctx.textAlign = 'left';
				ctx.fillText(nameList[index].split(' ')[1], 0, 170);
				//绘制二维码
				ctx.drawImage(img, 0, 0);

				// canvas转成路径 取出base64数据
				var imgdata = canvas.toDataURL('image/png').split(',')[1];
				// 根据村名创建文件夹
				imgFolder = zip.folder(Base64.decode(current.split(",")[4]));
				imgFolder.file(nameList[index] + '.png', imgdata, { base64: true });
				// 全部完成后打包下载
				if (index == nameList.length -1) {
					zip.generateAsync({ type: "blob" }).then(function(content) {
						saveAs(content, "QRCode.zip");
					});
				}
			}

		}, 0)
	}
}

最后来张效果图（随便弄了张，差不多都是敏感信息，全是码）