vue前端生成二维码并提供二维码下载

在一个管理后台的开发过程中使用到了需要前端自行生成分享二维码，并提供二维码下载功能，网上的解决方案很多，最终自己做完的思路和代码整理记录方便后续学习使用！
vue版本为2.x
具体实现步骤：

下载安装依赖（下载安装命令）： npm install qrcanvas
因为我只在一个页面用到了，所以只在使用页面导入 qrcanvas：import { qrcanvas } from ‘qrcanvas’
html部分的代码

<div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;" ></div>

具体的案例中二维码是一个弹出框，全局代码如下（案例使用的前端框架是Element ui）：

<el-dialog:visible.sync="qrcodeDialogVisible"title="二维码"width="30%"center><div id="shareQrcode" ref="shareQrcode" class="share-qrcode" style="width:256px;margin:0 auto;" /><span slot="footer" class="dialog-footer"><el-button @click="qrcodeDialogVisible = false">关 闭</el-button><el-button type="primary" @click="downLoadQrcode">下载二维码</el-button></span></el-dialog>

export default 代码如下：

export default {name: 'ComponentsName',components: {},data() {return {qrcode: '',qrcodeDialogVisible: false, // 分享二维码弹窗}},computed: {},created() {},methods: {// 点击下载按钮下载二维码图片downLoadQrcode() {let imgSrc, canvasif (document.getElementById('shareQrcode').childNodes[0]) {canvas = document.getElementById('shareQrcode').childNodes[0]imgSrc = this.CanvasToImage(canvas).getAttribute('src')const alink = document.createElement('a')alink.href = imgSrcalink.download = 'shareQrcode.png'alink.click()}},// canvas 转换成图片, 从canvas中提取图片imageCanvasToImage(canvas) {// 新Image对象，可以理解为DOMvar image = new Image()// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持// 指定格式PNGimage.src = canvas.toDataURL('image/png')return image},// 分享二维码弹窗popQrcode() {this.qrcodeDialogVisible = trueconst colorFore = '#4169E1'const colorOut = '#CD5C5C'const colorIn = '#191970'this.qrcode = ''this.$nextTick(() => {this.qrcode = qrcanvas({cellSize: 8,data: location.href,effect: { round: 0.4 },correctLevel: 'M',foreground: [// 前景色{ style: colorFore },// 外方块位置{ row: 0, rows: 7, col: 0, cols: 7, style: colorOut },{ row: -7, rows: 7, col: 0, cols: 7, style: colorOut },{ row: 0, rows: 7, col: -7, cols: 7, style: colorOut },// 内方块位置{ row: 2, rows: 3, col: 2, cols: 3, style: colorIn },{ row: -5, rows: 3, col: 2, cols: 3, style: colorIn },{ row: 2, rows: 3, col: -5, cols: 3, style: colorIn }],background: '#f5f5f5',padding: 12})// 判断是否有子节点，如果已经有则删除原有的，然后再新增子节点if (document.getElementById('shareQrcode').childNodes[0]) {this.$refs.shareQrcode.removeChild(document.getElementById('shareQrcode').childNodes[0])}this.$refs.shareQrcode.appendChild(this.qrcode)})}}
}

完成效果：

注意： 在options里配置effect如果未生效的话检查所安装依赖是否支持effect属性，默认简版是不支持该属性的。

关于二维码生成参考文档：

qrcanvas
新版 JavaScript 二维码生成工具（原来的 jsqrgen）
QrCanvas

本文档纯属个人学习记录，如果各位大佬有更好的方案可以留言交流，可供借鉴学习，感谢！

vue前端生成二维码并提供二维码下载相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
vue 前端生成二维码，并转换为图片
这篇文章主要是分享下自己的收获,也是自己遇到的问题: 前端如何自己生成二维码? 前端如何将生成的二维码转成图片并展示? 如何控制二维码的显隐? 话不多说,直接上干货 base64如何转换成图片 npm ...
vue前端生成二维码列表
<div v-for="(item,idx) in dataList" :key="idx"><div :id="`qrcode${ ...
Vue前端生成二维码（qrcode）
1.首先安装qrcode npm install --save qrcodejs2 2.引用 import QRCode from 'qrcodejs2' 3.使用 <div class=&qu ...
vue前端生成PDF文档+电子印章并导出（不用后端）
效果图: 环境安装将页面html转换成图片 npm install --save html2canvas 将图片生成pdf npm install jspdf --save 创建htmlToPdf. ...
vue前端生成词云图的方法
我试过很多方法,自定义词云图.echarts-wordcloud.highcharts都是各种各样报错,基本是是找不到wordcloud模块,引入了也会报错,最终发现js2wordcloud可以用 i ...
thinkphp后台管理系统+vue前端H5 app
thinkphp后台管理系统+vue前端H5 app 众包接单型App 全部源码已发布,欢迎star, 移步码云前言 1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理) 2.目前 ...
Vue前端环境搭建(最简单，最全)
Vue前端环境搭建(最简单,最全) VS code下载下载地址:https://code.visualstudio.com/ node下载 v14.15.4 版本过高不兼容部分插件,v14.15.4 ...

vue前端生成二维码并提供二维码下载

vue前端生成二维码并提供二维码下载相关推荐

最新文章

热门文章