vue-qr 二维码批量导出

参考Vue批量生成二维码并打包下载

首先我们需要安装三个插件

"jszip"//zip打包
"file-saver"//文件保存
"vue-qr"//二维码

完整代码如下:
src/components/QRcode/index.vue

<template><div><div v-for="(item, index) in qrCodeData" :key="index"><vue-qr:id_name="'qcode_' + index":text="item.url":callback="getQcodeUrl":bindElement="false":qid="item.qid"></vue-qr></div></div>
</template><script>
import JSZip from "jszip";
import FileSaver from "file-saver";
import vueQr from "vue-qr";export default {props: ["qrCodeData","zipName"],components: {vueQr,JSZip,FileSaver,},data() {return {qrCodeFile: [],};},methods: {getQcodeUrl(url, name) {var that = this;this.qrCodeFile.push({url: url,name: name,});if (this.qrCodeFile.length == this.qrCodeData.length) {const zip = new JSZip();this.qrCodeFile.forEach((item) => {const fileName = item.name + ".png";zip.file(fileName, item.url.substring(22), { base64: true }); //向zip中添加文件});zip.generateAsync({ type: "blob" }).then((content) => {// 生成二进制流FileSaver.saveAs(content, that.zipName + "--二维码.zip"); // 利用file-saver保存文件});this.$emit("closeDownload");this.qrCodeFile = [];}},},
};
</script>

二维码还有一些属性没有添加，比如logo图片，大小之类的，如果需要可以根据vue-qr，文档自行添加

页面中使用
views/table/index.vue

<template><div class="demo"><el-card class="box"><el-row style="margin-top: 20px"><el-button:disabled="multipleSelection.length == 0"type="primary"@click="downloadQcode">导出二维码</el-button></el-row><el-table:data="tableData"borderref="multipleTable"class="demo_table"style="width: 100%"stripe@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"> </el-table-column><el-table-columnprop="id"label="编号"min-width="180"></el-table-column><el-table-columnprop="name"label="姓名"min-width="180"></el-table-column><el-table-columnprop="address"label="地址"min-width="180"></el-table-column></el-table></el-card><QrCode:qrCodeData="multipleSelection"@closeDownload="closeDownload"zipName="打包"v-if="downloadLoading"/></div>
</template>
<script>
import QrCode from "@/components/QRcode/index";export default {name: "demo",components: {QrCode,},data() {return {tableData: [],downloadLoading: false,multipleSelection: [],};},created() {//demo数据生成for (let i = 0; i < 100; i++) {this.tableData.push({id:i,name:`姓名${i}`,address:`地址${i}`,})}},methods: {closeDownload() {this.downloadLoading = false;},downloadQcode() {this.downloadLoading = true;},handleSelectionChange(val) {val.forEach((e, i) => {val[i].qid = `${e.name}`;//二维码图片名称标识val[i].url = `https://www.baidu.com/s?wd=${e.address}`;//二维码文本内容});this.multipleSelection = val;},},
};
</script>
<style lang="scss" scoped>
.box {margin: 20px 10px;padding-top: 20px;
}
.content_top {margin: 20px 0;
}.demo_table {margin-top: 30px;
}
</style>

效果

vue-qr 二维码批量导出相关推荐

vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
vue-qr 二维码批量导出
首先我们需要安装三个插件 "jszip"//zip打包 "file-saver"//文件保存 "vue-qr"//二维码完整代码如下: s ...
Qt开发二维码工具QR二维码生成和识别支持批量生成免费使用
简介 Qt编写,使用第三方库libqrencode和QZxing,支持QR二维码生成和识别,二维码可批量生成,支持中文,还可以设置二维码大小颜色.免费使用,下载链接在本文底部,拿走不用谢,假如您慷慨大 ...
python用二维码共享文档_[源码和文档分享]基于Python的QR二维码的生成与识别程序...
摘要进入二十一世纪之后,高新技术产业得到了极其迅速的发展.计算机.互联网.物联网.云计算等领域的发展,使得整个社会的信息化程度极大提高.随着技术的不断成熟,目前的一维条形码已逐渐向二维码过渡.本课 ...
【实用软件】二维码批量解析软件v1.0
软件介绍二维码批量解析软件软件属于在线解析的,所以必须联网使用软件属于绿色软件,不需要安装,点击后直接运行软件功能二维码批量解析当大家有一大堆二维码,又不想拿着手机一个一个扫的时候,这样的 ...
vue扫描二维码，真机调试
vue扫描二维码,真机调试 vue代码使用HBuilderX 运行界面 vue代码 <el-button>标签需要引用element-ui,如果没有,可以注释,打开下面的普通<bu ...
C# vb .NET生成QR二维码
二维码比条形码具有更多优势,有些场合使用二维码比较多,比如支付.通过将某些数据生成二维码,就可以实现一码走天下.那么如何在C#,.Net平台代码里生成二维码呢?答案是使用SharpBarcode! S ...
【OpenCV 4开发详解】QR二维码检测
本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
OpenCV4.0 快速QR二维码检测测试示例
点击我爱计算机视觉标星,更快获取CVML新技术近几年由于微信大力推广移动支付,二维码已经成为手机App的标配,在众多种类的二维码中,QR码是最为流行的. 刚刚发布的OpenCV4.0-Alpha新增 ...

vue-qr 二维码批量导出

vue-qr 二维码批量导出相关推荐

最新文章

热门文章

vue-qr 二维码 批量 导出

vue-qr 二维码 批量 导出相关推荐

最新文章

热门文章

vue-qr 二维码批量导出

vue-qr 二维码批量导出相关推荐