elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）

需求：在elementUI表格中显示二维码，以及批量下载二维码

上图：

首先我们先做好前置工作npm下载 qrcode和 jszip和file-saver，

然后qrcode我封装成一个组件sm-qrcode了(这个组件我用了上传到服务器的)：如下

<template><!-- 生成二维码开放接口:二维码内容[通常为url]二维码大小[限制为正方形]二维码中间显示：文字或LOGO[默认不显示]--><div id="meQrcode"><div class="qrcode_box"><img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码图片"><img v-if="qrLogo" class="qrcode_logo" ref="qrcode_logo" :src="qrLogo" alt="二维码logo"><canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas"></canvas></div></div>
</template>
<script>const QRCode = require("qrcode");export default {data() {return {};},/**传入时间戳显示倒计时函数【后台时间戳一般都是10位的】* @argument qrUrl        二维码内容* @argument qrSize       二维码大小* @argument qrText       二维码中间显示文字* @argument qrTextSize   二维码中间显示文字大小(默认16px)* @argument qrLogo       二维码中间显示图片* @argument qrLogoSize   二维码中间显示图片大小(默认为80)* 注：qrText与qrLogo只能显示一个，如果想要显示两个需要自行设计*/props: ["qrUrl", "qrSize", "qrText", "qrLogo", "qrLogoSize", "qrTextSize"],mounted(){this.drawQR();},methods:{drawQR() {// 画二维码里的logo[注意添加logo图片的时候需要使用服务器]let qrcode_canvas = this.$refs.qrcode_canvas;let qrcode_logo = this.$refs.qrcode_logo;let canvas = this.$refs.canvas;QRCode.toDataURL(this.qrUrl, {errorCorrectionLevel: "H"}, (err, url) => {qrcode_canvas.src = url;// 画二维码里的logo// 在canvas里进行拼接let ctx = canvas.getContext("2d");setTimeout(() => {//获取图片ctx.drawImage(qrcode_canvas, 0, 0, this.qrSize, this.qrSize);if (this.qrLogo) {//设置logo大小//设置获取的logo将其变为圆角以及添加白色背景ctx.fillStyle = "#fff";ctx.beginPath();let logoPosition = (this.qrSize - this.qrLogoSize) / 2; //logo相对于canvas居中定位let h = this.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)let w = this.qrLogoSize + 10; //圆角宽let x = logoPosition - 5;let y = logoPosition - 5;let r = 5; //圆角半径ctx.moveTo(x + r, y);ctx.arcTo(x + w, y, x + w, y + h, r);ctx.arcTo(x + w, y + h, x, y + h, r);ctx.arcTo(x, y + h, x, y, r);ctx.arcTo(x, y, x + w, y, r);ctx.closePath();ctx.fill();ctx.drawImage(qrcode_logo,logoPosition,logoPosition,this.qrLogoSize,this.qrLogoSize);} else if (this.qrText) {//设置字体let fpadd = 10; //规定内间距ctx.font = "bold " + this.qrTextSize + "px Arial";let tw = ctx.measureText(this.qrText).width; //文字真实宽度let ftop = (this.qrSize - this.qrTextSize) / 2; //根据字体大小计算文字toplet fleft = (this.qrSize - tw) / 2; //根据字体大小计算文字leftlet tp = this.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置ctx.fillStyle = "#fff";ctx.fillRect(fleft - tp / 2,ftop - tp / 2,tw + tp,this.qrTextSize + tp);ctx.textBaseline = "top"; //设置绘制文本时的文本基线。ctx.fillStyle = this.getBackgroundColor();ctx.fillText(this.qrText, fleft, ftop);}canvas.style.display = "none";qrcode_canvas.src = canvas.toDataURL();qrcode_canvas.style.display = "inline-block";}, 500);});},getBackgroundColor: function () {switch (this.adminThemeValue) {case "blue":return "#287BC9";case "green":return "#18ae91";case "purple":return "#5067cd";}}},watch:{qrUrl(){this.drawQR();}}};
</script>
<style scoped>.qrcode_box,#meQrcode{display: inline-block;}.qrcode_box img {display: none;}
</style>

然后在页面中使用：

到这个地方就已经可以在表格中显示二维码了，这下一步批量下载二维码

要在页面中先引入

先设置表格允许批量选择在头部添加@selection-change

先说一下逻辑：因为表格获取不到选中行的dom元素，只能获取全部的，所以我用了走远路的方式

1.首先选中的时候，获取下标，存到arr数组中

2.然后点击下载的时候判断是否有批量选择，如果没有，就下载全部，如果有选择，就下载选择的

大概就这个意思，不知道我解释清楚了没，哈哈哈

elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）相关推荐

TCP/IP协议十二：关于MAC地址和IP地址在传输过程中变与不变的问题
TCP/IP协议十二:关于MAC地址和IP地址在传输过程中变与不变的问题 1. 结论 2. 原因: 3. 例子 4. 参考: 1. 结论 mac变,ip不变. mac地址在同一个广播域传输过程中是不变 ...
Suricata6.0流表管理源码注释九：补充：流新建过程中对于超时流的处理
这篇文章是流新建的补充,主要是流新建过程也会检查流的超时时间,如果超时的话对这些超时的流也会进行处理,下边梳理一下这个地方对超时流的处理流程. 1. MoveToWorkQueue 函数 FlowHa ...
性能测试架构层(二) 从性能测试层面了解架构设计分布式项目实施过程中的常见难点，测试架构层面思考性能测试应该如何做？自行思考解决方案是什么？
目录前言架构预览小节一.访问层架构设计 1.LVS 2.Nginx 二.API 网关层架构设计 1.分布式会话管理 2.接入层控制 Filter过滤器三.核心服务层架构设计 1.核心服务 ...
用Python+requests库批量下载知乎高赞回答中的所有表情包
干货分享二十多本Python好书,戳这领取引言今天研究了会requests库.发现和urllib库功能类似,很好上手,因此写了个Demo爬了爬表情包.我选取了几个知乎里关于表情包问题的高赞回答, ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
C# winform实现excel导入导出及实现过程中的问题解决
学习使用winform实现excel表格的导入导出功能,制作一个小demo. 先画一个简单的界面:表名comboBox中的值为数据库中的表名['student','teacher','class',' ...
linux存储库rep 61082,安装informatic过程中的错误
1.Check if the DISPLAY variable is set export DISPLAY=192.168.3.201:0.0 在注销用户并切换到oracle或者infa 用户,就可以 ...
c语言调试过程中的错误,C语言调试过程中duplicate symbol错误分析
说明:在我们调试C语言的过程中,经常会遇到duplicate symbol错误(在Mac平台下利用Xcode集成开发环境).如下图: 一.简单分析一下C语言程序的开发步骤. 由上图我们可以看出C语言由 ...
ota升级包编译过程中firmware如何添加进来
整个分析过程中,机型名以xxxx为例主要可分为一 firmware如何添加进target-files.zip 二编译ota升级包时如何从target-files.zip取出firmware并添加 ...

elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）

elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）相关推荐

最新文章

热门文章

elementUI表格中 使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）

elementUI表格中 使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）相关推荐

最新文章

热门文章

elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）

elementUI表格中使用 jszip+file-saver+qrcode展示二维码以及批量下载二维码（包括过程中的坑）相关推荐