二维码生成单个下载批量打包下载

安装引入插件

import VueQr from "vue-qr";
import JSZip from "jszip";
import FileSaver from "file-saver";components: {  VueQr, JSZip, FileSaver },

单个下载

 <divid="qrCode"ref="qrCode"style="display: flex; flex-direction: column; align-items: center"><vue-qr :text="text" :size="200"></vue-qr><div>{{ zzssmc }}</div></div><div style="margin-top: 20px; display: flex; justify-content: center"><el-button type="primary" @click="getQrCodeImage(zzssmc)">下载</el-button><el-button @click="openewm = false">取消</el-button></div>

 getQrCodeImage(zzssmc) {var canvasData = document.getElementById("qrCode").getElementsByTagName("img");console.log(canvasData, 123);var a = document.createElement("a");a.href = canvasData[0].src;a.download = zzssmc + "二维码.png";a.click();},

循环展示二维码数据

 <div style="display: flex; flex-wrap: wrap"><div:class="'code-mar'"ref="qrCode"v-for="item in ewmlist":key="item.id"style="display: flex; flex-direction: column; align-items: center"><vue-qr :text="item.id.toString()" :size="200"></vue-qr><div>{{ item.zzssmc }}</div></div></div><div style="margin-top: 20px; display: flex; justify-content: center"><el-button type="primary" @click="getQrCodeImage1()">下载</el-button><el-button @click="openewm1 = false">取消</el-button></div>

批量下载打包

 getQrCodeImage1() {//获取二维码图片let a = document.querySelectorAll(".code-mar img").forEach((item) => {this.qrFile1.push(item.src);});//获取二维码名称let b = document.querySelectorAll(".code-mar div").forEach((item) => {this.qrFile2.push(item.innerHTML);});//处理数组，获得想要的格式let arr = [];for (let i = 0; i < this.qrFile1.length; i++) {let obj = new Object();obj.src = this.qrFile1[i];obj.name = this.qrFile2[i];this.qrFile.push(obj);}this.getUrl();},getUrl() {const zip = new JSZip();this.qrFile.forEach((item, index) => {console.log(item, 33);zip.file(item.name + ".png",  //打包文件名字item.src.replace(/^data:image\/(png|jpg);base64,/, ""),//插入打包图片，处理格式问题{ base64: true }); //向zip中添加文件});zip.generateAsync({ type: "blob" }).then((content) => {// 生成二进制流FileSaver.saveAs(content, "批量导出" + "--二维码.zip"); // 利用file-saver保存文件});},

二维码生成单个下载批量打包下载相关推荐

vue二维码生成且带文字图片下载
(一)web页面效果: (二)执行结果: (三)vue代码实例: 1)安装qrcode-vue库:npm install --save qrcode-vue 2)安装html2canvas库:npm ...
二维码生成并在下方添加文字，打包下载
Maven依赖 <dependency><groupId>com.google.zxing</groupId><art ...
PHP批量生成底部带编号二维码(二维码生成+文字生成图片+图片拼接合并)
PHP批量生成带底部编号二维码(二维码生成+文字生成图片+图片拼接合并) 需求: 输入编号如 : cb05-0000001 至 cb05-0000500 批量生成以编号为名称的下图二维码,然后压缩 ...
Qt开发二维码工具QR二维码生成和识别支持批量生成免费使用
简介 Qt编写,使用第三方库libqrencode和QZxing,支持QR二维码生成和识别,二维码可批量生成,支持中文,还可以设置二维码大小颜色.免费使用,下载链接在本文底部,拿走不用谢,假如您慷慨大 ...
simple go web application 二维码生成打包部署
go语言简易web应用 & 二维码生成及解码 & 打包部署转载请注明出处: https://www.cnblogs.com/funnyzpc/p/10801476.html 前言(闲 ...
Winform中实现Excel导入、表格展示、多选获取值、生成二维码、打印流程(附代码下载)
场景整体流程需求 1.导入Excel并获取Excel的数.. 2.将Excel的数据复制给DataGridView中进行显示并能实现多选. 3.根据选中的内容生成二维码. 4.将二维码打印. 整体效 ...
图片下载_二维码生成
图片下载 /*** 图片类型* @param path 图片地址* @param id uuid* @param isAspose* @return* @throws IOException*/pri ...
java二维码生成使用SSM框架搭建属于自己的APP二维码合成、解析、下载
java二维码生成使用SSM框架搭建属于自己的APP二维码合成.解析.下载自己用java搭建一个属于自己APP二维码合成网站.我的思路是这样的: 1.用户在前台表单提交APP的IOS和Andro ...
二维码生成工具微信小程序源码下载
二维码生成工具支持上传二维码logo和调整尺寸背景颜色等等无需域名与服务器使用教程,用HBuilder X软件打卡项目然后运行到微信小程序即可下方是演示图: 小程序源码下载地址: (已更新)二 ...

二维码生成单个下载批量打包下载

二维码生成单个下载批量打包下载相关推荐

最新文章

热门文章

二维码生成 单个下载 批量打包下载

二维码生成 单个下载 批量打包下载相关推荐

最新文章

热门文章

二维码生成单个下载批量打包下载

二维码生成单个下载批量打包下载相关推荐