【业务实战】批量生成二维码并打成压缩包

Dy1ngn

已于 2022-07-31 22:59:23 修改

阅读量898

点赞数 1

分类专栏：业务实战文章标签： javascript css css3

于 2022-07-29 17:01:05 首次发布

本文链接：https://blog.csdn.net/weixin_43574035/article/details/126057219

版权

二维码生成 html2canvas jszip 压缩包批量下载

关键词由CSDN通过智能技术生成

业务实战专栏收录该内容

2 篇文章 0 订阅

订阅专栏

批量生成二维码并打成压缩包

功能简介
- 场景
- 解决方案
代码实现

功能简介

场景

需要制作一批二维码图片，其中二维码需要配套的文字解释，并生成图片下载。

解决方案

二维码生成使用qrcode即可，然后需要配套的将文字与二维码合成一个div，再通过html2canvas转换成图片，再进行下载，由于数量不定，一次性下载多个图片不符合人类习惯操作，所以选择使用jszip进行压缩，将其打包成压缩包下载，几个方案的demo我都放在下面了。（ps:临时起意想写写编程记录，一个功能拆分了三篇文章，大家按需获取就可以啦）
批量生成二维码demo下载
 html2canvas使用demo文章
 qrcode使用demo文章

代码实现

html

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
		</head>
		<script type="text/javascript" src="./jquery.min.js"></script>
		<script type="text/javascript" src="./qrcode.min.js"></script>
		<script type="text/javascript" src="./bluebird.js"></script>
		<script type="text/javascript" src="./html2canvas.min.js"></script>
		<script type="text/javascript" src="./jszip.min.js"></script>
		<script type="text/javascript" src="./FileSaver.js"></script>
		<script src="./packaging.js"></script>
		<body>
			<!-- 这个可以理解为实际界面的整个界面 -->
			<div id="container" style="width: calc(100vw - 50px);height: calc(100vh - 50px);">
				<!-- 做一个满屏幕大小的界面（实战场景实际为表格、或者直接是个界面） -->
				<div style="width: 100%;height: 800px;background-color: #ffffff;z-index: 2500;">
					这是一个整体的界面,需要生成多少个不同的二维码：
					<input type="number" id="input" value="100">
					<button onClick="makeCode()">测试按钮</button>
				</div>
			</div>
			
		</body>
		<script>
		</script>
	</html>

js

//zip压缩原型
var zip
//名字去重列表
var nameList = {}

function makeCode() {
	//初始化
	nameList = {}
	zip = null
	zip = new JSZip()
	// 获取外部容器
	const divBox = document.getElementById('container')
	// 异步使用for循环顺序执行正常
	for (let i = 0; i < (document.getElementById('input').value + 0); i++) {
		// 随机值
		const key = Math.random() * 100000000000000000
		// 制作一个div
		let div = document.createElement('div')
		// 将div放入外部容器
		divBox.appendChild(div)
		// 唯一id
		div.id = `id${i}`
		// style主要是为了使多个div重叠，且不出问题(ps:将单双数的二维码大小区分开)
		div.style = `width: 324px;height: ${i%2?200:350}px;background-color: white;position:absolute;z-index: -1`
		//创造一个二维码div
		let qrcodeDiv = document.createElement('div')
		qrcodeDiv.id = `qrcode${i}`
		div.appendChild(qrcodeDiv)
		qrcodeDiv.style = `margin-top: 8px;width: 324px;height:${i%2?150:300}px;display:flex;justify-content:center ;align-items:center ;`
		var qrcode = new QRCode(qrcodeDiv, {
			width: i%2?150:300,
			height: i%2?150:300
		});
		// 生成二维码
		qrcode.makeCode(key);
		// 创造一个key值div
		let keyDiv = document.createElement('div')
		div.appendChild(keyDiv)
		keyDiv.style = `margin-top: 8px;width: 324px;height:40px;text-align:center;font-size:14px;color:#1890ff`
		keyDiv.innerHTML = key
		// 把需要传的值做好
		const data = {
			id: `#id${i}`,
			name: `${key}.png`,
			over:i === (document.getElementById('input').value - 1)
		}
		// 执行多元下载方法
		transition(data)
	}
}

function transition(data) {
	html2canvas($(data.id), {
		onrendered: function(canvas) {
			var dataUrl = canvas.toDataURL('image/png', 1.0);
			var imgdata = dataUrl.split(',')
			// 将base64位文件放入压缩包
			setFile(data.name, imgdata[1], 1, data.name)
			// 判断为最后一个打包下载
			if (data.over) {
				zip.generateAsync({
						type: 'blob'
					})
					.then(function(content) {
						saveAs(content, "二维码合集.zip")
					})
			}
			//删除原来的div
			document.getElementById(data.id.split('#')[1]).outerHTML = ''
		}
	})
}

// 文件名去重（压缩包内不能有重复名字的文件，不然会覆盖）
function setFile(name, imgdata, i, oldName) {
	if (nameList[name]) {
	    //名字重复则在后面加（数字）
		var newName = oldName.split('.png')[0] + `(${i}).png`
		var newI = i + 1
		//递归执行
		setFile(newName, imgdata, newI, oldName)
	} else {
	    //名字不重复则名字加入名字除重列表
		nameList[name] = true
		zip.file(name, imgdata, {
			base64: true
		})
	}
}