纯前端 vue项目批量生成二维码并打包成压缩包

干货：

纯前端 vue项目生成二维码并打包成压缩包

内容：

html部分：

<template lang=""><div><div id="qrcode" class="code" ref="qrCodeDiv"  v-show="firstFlag"><div v-for="(item, index) in list" :key="index" :id="'captureId'+index" class="invitationCode"><div class="codeImgbox" ref="BoxImgContent" :id="'codeImgbox' + index"></div></div></div><div v-show="!firstFlag"><img class="code_img" :src="canvasImageUrl" alt /></div></div>
</template>

js部分：

import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
import JSZip from "jszip"
import FileSaver from 'file-saver';
export default {data () {return {firstFlag: true,// 用于控制dom的显隐canvasImageUrl: "",  // html2canvas 生成的图片链接list: [],stationCanvas: []};},mounted () {// 不一定要放在这个生命周期，写成函数也行！！！// 因为工作需求生成100个二维码前面地址不变但是后面序号改变 所以用了这样的方式生成了一个数组，// 一般批量生成基本上这种循环就可以解决，当然，如果你有一个表格的数据需要生成二维码 只要数组的格式为：// [{url:'http:......',name:'',imgSrc:''},{url:'http:......',name:'',imgSrc:''}.....]//  这种格式就行，解析表格的话可以找后端协助返回给你数组也行for (let index = 10000001; index < 10000101; index++) {this.list.push({url: 'http://xxxxxx.html' + index, // 二维码的地址name: index, // 设置每一个二维码的文件名imgSrc: ''// 生成的二维码放图片的字段})}// 这边的循环是在生成对应上方数组数量的二维码，方法有点笨，有前辈话可以提一下建议// 这一步非常慢，有待优化this.list.forEach((element, index) => {this.$nextTick(function () {this.qrcode(element.url, index)});});this.firstFlag = false;this.$nextTick(function () {this.packageImages(); // 二维码生成后，执行生成图片，并打包});},methods: {// qrcode 的使用qrcode (data, index) {// data,index 是传过来的值，不用多说new QRCode(this.$refs.qrCodeDiv.children[index].children[0], {// this.$refs.qrCodeDiv.children[index].children[0] 这个是dom选择器，选择对应的dom生成二维码width: 300, // 二维码的宽height: 300, // 二维码的高text: data, // 二维码地址colorDark: "#000",// 二维码颜色colorLight: "#fff"// 二维码背景色//  这里 生成的二维码可能样式达不到预期要求，文后在说一说怎么调节});},// 打包图片成压缩包的函数packageImages () {// 初始化stationCanvas this.stationCanvas = [];// 循环每一个类名为invitationCode的dom元素document.getElementsByClassName('invitationCode').forEach((item, index) => {// 使用html2canvas 截取这个dom 并生成图片html2canvas(document.querySelector("#captureId" + index)).then((canvas) => {const url = canvas.toDataURL(); // 生成的图片const Obj = {// invitationCode这个dom的内容，可以打印（item）看一看url: item.children[0].getAttribute('title'), src: url, };this.list.forEach((item1) => {// 判断内容是否相等,相等的一个item1下面的imgSrc就等于invitationCode这个dom下面生成的图片的base64if (item1.url === Obj.url) {item1.imgSrc = item.children[0].children[1].getAttribute('src');}});// 然后添加到这个数组里面this.stationCanvas.push(url);// 判断 this.stationCanvas 这个数组是否等于我们的原数组，也就是循环走到最后一个时，批量处理文件if (this.stationCanvas.length === this.list.length) {const zip = new JSZip();  // 压缩的插件方法const cache = {};const arr = this.list;arr.forEach((item) => {// 设置生成的文件名const fileName = item.name;// 文件名加文件流加格式zip.file(`${fileName}.png`, item.imgSrc.substring(22), { base64: true });// 这句不懂 用就完事了 ，大概就是插件需要这样的数据类型cache[fileName] = item.imgSrc;});// 打包zip.generateAsync({ type: 'blob' }).then((content) => {FileSaver.saveAs(content, '二维码.zip');//这里设置压缩包的名称});}}).catch(error => { });});},}
}

如果想修改二维码的样式 可以尝试找一下 找到 “node_modules/qrcodejs2/qrcode.js”
找到这段代码，修改你想要的样式，我这里加了margin = 5px

var Drawing = function (el, htOption) {this._bIsPainted = false;this._android = _getAndroid();this._htOption = htOption;this._elCanvas = document.createElement("canvas");this._elCanvas.width = htOption.width;this._elCanvas.height = htOption.height;this._elCanvas.style.margin = "5px";// 自己加的一段el.appendChild(this._elCanvas);this._el = el;this._oContext = this._elCanvas.getContext("2d");this._bIsPainted = false;this._elImage = document.createElement("img");this._elImage.alt = "Scan me!";this._elImage.style.display = "none";this._el.appendChild(this._elImage);this._bSupportDataURI = null;};

胡言乱语：

这个不算是项目需求，只是公司在发展业务时需要打印二维码，但是打印店不支持给他们表格，然后按照表格内容打印，公司就让我们去网上找二维码生成的工具，但是大部分工具要么就是单张生成(作为程序员肯定受不了,这要弄一百张得弄吐)，要么就是批量生成的二维码扫出来后还加了层壳，不能直接访问，例如(某料)，然后就自己开始琢磨这个东西，然后就弄出来了。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！