vue 生成二维码并可以下载带有边框背景颜色的二维码

项目需求：需要生成一个可以下载且带有边框背景的二维码

如果只用qrcode.js只能实现下载二维码，但是下载下来的二维码没有边框背景，可识度非常低，所以需要给下载的二维码加个边框，白色灰色之类的

首先下载要使用的插件

npm/cnpm install qrcodejs2 --savenpm/cnpm install html2canvas --save

引入插件

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

html代码：

<!-- 控制对话框显示隐藏 -->
<el-button type="primary" icon="el-icon-s-grid" @click="show_qrcode(scope.row.name, scope.row.portalUrl)" style="margin-left: 0;" :disabled="scope.row.staticQrcodeAuth == 'disable'"></el-button>
//我将二维码放在了一个dialog里，这里自行定义
<el-dialogwidth="30%":before-close="handleClose":show-close="false":center="true":title="$t('hotpot.staticma')"@close="closeCode":visible.sync="centerDialogVisible"append-to-body><!-- 用一个div套一个div给外层div加边框 --><div id="canva" class="paycode" style="width: 295px;height: 295px;border:20px solid #fff;margin: 0 auto;"><!-- 这里是放二维码图片的地方 --><div id="qrCodeImg" ref="qrcode"></div></div><span slot="footer" class="dialog-footer"><el-button @click="closeCode">{{ $t('hotpot.closema') }}</el-button><el-button type="primary" @click="saveImg">{{ $t('hotpot.downloadma') }}</el-button></span></el-dialog>

data里的都是一些dialog的显示隐藏，省略

methods里面的方法

// 这里可以写个show_qrcode (val, value) {//控制dialogthis.centerDialogVisible = true// 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接//var qrcodeValue = value.slice(0, value.length - 6)// this.qrcode = qrcodeValue + '/qrcode_login'// 使用$nextTick确保数据渲染，调用createQrcodethis.$nextTick(() => {this.createQrcode()})},// 生成二维码createQrcode () {var qrcode = new QRCode('qrCodeImg', { //对应html的idtext: this.qrcode, //二维码内容，自定义width: 256, // 二维码宽度height: 256, // 二维码高度colorDark: '#000000', // 前景色colorLight: '#ffffff', // 背景色correctLevel: QRCode.CorrectLevel.H // 二维码 容错级别})console.log(qrcode)},// 执行下载saveImg () {// 调用下载二维码，并传一个下载的名this.downloadIamge('静态二维码')}// 下载二维码downloadIamge (name) {html2canvas(document.getElementById('canva')).then(canvas => {var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的urlvar saveLink = document.createElement('a')// 临时创建二维码saveLink.href = imgUri// 二维码下载路径saveLink.download = name + '.png'// 二维码名saveLink.click()//点击 执行下载})// 我在点击下载后关闭dialogthis.closeCode()},// 关闭弹框,清除已经生成的二维码closeCode () {// 清除生成的二维码，每次打开后重新生成//注意这里的$ref，html部分也要加refthis.$refs.qrcode.innerHTML = ''this.centerDialogVisible = false}

vue 生成二维码并可以下载带有边框背景颜色的二维码相关推荐

vue 生成证书模板并支持图片下载和导出PDF的demo
demo 使用的是html2canvas 和jspdf 插件, 不明白的先去看这个插件使用下面是我的一个例子,大家可以参考: 注意: 请先看上面文章,安装插件和配置,这里不重复说了哦 index. ...
码云如何下载历史版本代码_使用IDEA在码云上托管并更新自己的项目
如果没有安装Git 可以看下这篇博客 Git入门安装 IDEA内置 git 功能一.工作时开发的注意事项代码需要备份[主要是防止代码丢失] 每个大版本都需要备份分支持[主要是1.0出现问题时,不能 ...
vue实现网页中滚动鼠标时改变导航栏背景颜色
1.HTML <div id="topBannerNav" :style="topBannerNavBg">导航栏部分 </div> 2 ...
SwiftUI TabView设置选中Item颜色和Tab背景颜色教程含源码
实战需求 SwiftUI TabView如何设置选中Item颜色和Tab背景颜色本文价值与收获看完本文后,您将能够作出下面的界面看完本文您将掌握的技能掌握TavView基础使用掌握accen ...
微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
vue生成code128条码
VUE生成code128条码 1.先下载插件 npm i jsbarcode 2.生成条码 <template><div style="width: 66%;margin: ...
java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载
一. vue页面生成二维码 <template><div class="app-container">//在页面放着二维码的div<div id=&q ...
vue 生成二维码并下载
vue 项目中需要实现生成二维码,并且下载下来. 引入 qrcode : import QRCode from "qrcodejs2" 生成二维码: createQRCode () ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...

vue 生成二维码并可以下载带有边框背景颜色的二维码

data里的都是一些dialog的显示隐藏，省略

methods里面的方法

vue 生成二维码并可以下载带有边框背景颜色的二维码相关推荐

最新文章

热门文章

vue 生成二维码 并 可以下载带有边框背景颜色的二维码

data里的都是一些dialog的显示隐藏，省略

methods里面的方法

vue 生成二维码 并 可以下载带有边框背景颜色的二维码相关推荐

最新文章

热门文章

vue 生成二维码并可以下载带有边框背景颜色的二维码

vue 生成二维码并可以下载带有边框背景颜色的二维码相关推荐