前端批量生成二维码并打包下载

项目中遇到一个紧急需求在没有后端配合的情况下，前端独自实现生成二维码并打包下载
生成二维码：下载 qrcodejs2
批量打包下载：下载 JSZip 和 FileSaver
对二维码进行二次加工：html2canvas
首先项目中分别引入
import QRCode from 'qrcodejs2';
import JSZip from 'jszip';
import FileSaver from 'file-saver';

由于QRCode只是生成了一个二维码，

产品这边嫌太单调让做二次加工，需要带上需要生成二维码的一下文本信息，

所以用到了html2canvas来将一个dom转成图片进行下载(要是大佬们有什么好的方法请告诉我，我实在不知道应该怎么弄只能选这种最笨的方法了QAQ)
接下来就是生成二维码：
生成二维码首先要认识到其实只是将一个你需要跳转的url给转成二维码而已，所以你需要一个跳转的url（最好是短链接，长链接的话会导致打点太密集有可能微信扫不出来）
你要是短链接的话可以直接使用不是的话最好转换一下防止扫不出来的问题

// 生成二维码bindQRCode(codeurl, index) {// eslint-disable-next-line no-newnew QRCode(this.$refs.qrcode.children[index].children[0], {// 二维码宽度，单位像素width: 450,// 二维码高度，单位像素height: 450,// 二维码内容：二维码扫描之后访问的地址text: codeurl,// 前景色colorDark: '#000000',// 背景色colorLight: '#ffffff',// 容错级别，correctLevel: QRCode.CorrectLevel.H,});// 关闭loadingthis.loading = false;// 显示下载按钮this.HasDatacodeShow = true;},

this.$refs.qrcode.children[index].children[0]这个东西是你二维码生成的位置
由于我这里是循环生成的需要索引

//   打包下载packageImages() {console.log('进入到打包下载');//   const that = this;this.stationCanvas = [];// eslint-disable-next-line no-plusplusdocument.getElementsByClassName('codeBox').forEach((item, index) => {html2canvas(document.getElementById(`codeimg${index}`)).then((canvas) => {const url = canvas.toDataURL();const Obj = {url: item.children[0].getAttribute('title'),src: url,};// eslint-disable-next-line no-shadowthis.shortUrlList.forEach((item) => {if (item.shorturl === Obj.url) {// eslint-disable-next-line no-param-reassignitem.imgSrc = url;}});this.stationCanvas.push(Obj);// 这里才是下载的地方，上面的方法是将通过二次加工后的赋值的操作if (this.stationCanvas.length === this.shortUrlList.length) {const zip = new JSZip();const cache = {};const arr = this.shortUrlList;// eslint-disable-next-line no-shadowarr.forEach((item) => {// 设置生成的文件名，并且直接生成的二维码是base64二次加工过后的也是base64const fileName = item.address.split('东港区')[1] + item.name;zip.file(`${fileName}.png`, item.imgSrc.substring(22), { base64: true });cache[fileName] = item.imgSrc;});zip.generateAsync({ type: 'blob' }).then((content) => {this.loading = false;FileSaver.saveAs(content, '二维码.zip');//这里设置压缩包的名称this.$nextTick(() => {//这里是由于我有分页操作要是不清空前一页的数据会导致后来生成的和之前的二维码重叠这样二次加工的就会错误this.shortUrlList = [];});});}});});},

用html2canvas做二次加工会有个问题是html2canvas是个异步方法，而且会动态创建iframe然后销毁，要是大量的数据会导致内存泄漏，逼不得已加了分页来导出，要是大佬们有什么好的建议还请告诉我QAQ~
下面放一下页面结构~样式就不放了

<template><divid="exportBox"v-loading="loading":element-loading-text="loadingtext"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"><!-- <div class="title">日照智慧药房门店二维码导出系统</div> --><div class="contentBox"><div class="cityBox"><div class="ChooseCode"><el-selectv-model="chooseArea"placeholder="请选择区域"style="width:200px;margin-right:20px"@change="ChangeArea"><el-option v-for="item in cities" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select><el-selectv-model="chooseStreet"placeholder="请选择街道"style="width:200px;margin-right:20px"@change="ChangeStreet"><el-option v-for="item in Strees" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select><el-selectv-model="chooseCommunity"placeholder="请选择社区"style="width:200px;"@change="ChangeCommunity"><el-option v-for="item in Community" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></div><div class="ChooseTime"><el-date-pickerv-model="hasChooseDate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd HH:mm:ss"@change="ChangeTimeData"></el-date-picker></div></div><div class="exportButton"><el-button type="primary" @click="clickecport">生成二维码</el-button><el-button v-show="HasDatacodeShow" type="primary" @click="clickeexportcode">下载</el-button></div><el-paginationbackgroundlayout="prev, pager, next":total="AllTotals":page-size="50"@current-change="ChangeCurrent"></el-pagination><div id="qrcodeBox" ref="qrcode" v-show="qrcodeBoxShow"><divclass="codeBox"v-for="(item, index) in shortUrlList":key="index":id="'codeimg' + index"ref="qrc"><div class="codeImgbox" ref="BoxImgContent" :id="'codeImgbox' + index"></div><div class="codeStation"><span class="address storeName">{{ item.address }}</span><span class="storeName">{{ item.name }}</span></div></div></div></div></div>
</template>

前端批量生成二维码并打包下载相关推荐

Vue批量生成二维码并打包下载
//[插件地址](https://github.com/Binaryify/vue-qr) <template v-for="(item, index) in qr_code_data ...
前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签
注意:本文调试的是letter纸尺寸前端js html转换成pdf可下载打印 html2canvas + jspdf 前端js生成条形码 Options · lindell/JsBarcode ...
springboot+hutool批量生成二维码压缩导出
文章目录 1.引入依赖 2.测试编码 3.批量生成 4.解析excel 5.批量图片压缩 6.上传excel直接将输出流转成压缩包 1.引入依赖 <de ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
TXT文件批量生成二维码
大多数人在制作标签时,数据库文件都选择Excel文件,其实TXT文件在作为数据库时,也是可以制作各种可变数据标签的,比如批量生成二维码,条形码等.下面我们就使用TXT文件作为数据库批量生成二维码. 打 ...
读取excel批量生成二维码
昨天工作需要,让生成二维码,让用草料生成,就需要一个个的复制粘贴,有点麻烦.关键是量特别大,如果传统的复制粘贴要很长时间才可以. 后来想到用程序生成.于是百度了一下生成二维码的方法,别说还很简单,把代 ...
速码工具箱，Excel批量生成二维码，瞬间搞定！
之前写过一篇文章,<批量生成二维码>,当时介绍了VBA中两种生成二维码的方式,一种需要引用QRmaker控件,一种是纯代码生成的方式.但是这两种方式都有一个最大的bug--不支持64位. ...
如何从Excel表格导入数据批量生成二维码
目前二维码应用渐趋广泛,二维码具有储存量大.保密性高.追踪性高.抗损性强.备援性大.成本便宜等特性,这些特性特别适用于表单.安全保密.追踪.证照.存货盘点.资料备援等方面.那么我们怎么用条码打印软件从 ...
2023最新在线批量生成二维码网站源码+全开源/UI简约
正文: 在线批量生成二维码网站源码,直接拖服务器就能运行php7.3,程序采用本地接口支持生成接口,生成后自动保存,生成后压缩保存,具体功能可以自己测试,源码无加密. 程序: wwxhes.lanzo ...

前端批量生成二维码并打包下载

前端批量生成二维码并打包下载相关推荐

最新文章

热门文章