vue引用qrcodejs2生成、下载二维码、复制到剪贴板

2024-05-20 01:03:57

使用的vue2.x版本，UI框架为ant design vue 1.X版本

1.场景：页面需要展示二维码并且需要下载二维码的功能

效果图：

引用插件：

yarn add qrcodejs2@0.0.2

template标签内容

 <div class="qrcodeDownLoad"><div class="qrcode" ref="qrcodeFile" :id="'qrcode_' + qcCodeKey"></div><a-button type="primary" class="downLoadbtn" @click="downloadCode"> 下载二维码 </a-button></div>

script标签内容

<script>
import QRCode from 'qrcodejs2'
export default {data(){reture{//处理二维码下载缓存的问题qcCodeKey: new Date(),//分享shareForm: {//是否加密passWordVal: 'false',//文件分享的链接shareName: '',//提示message: '',//是否显示二维码isQRCodeShow: true,//抬头title: '',//格式suffix: '',}}},created(){this.$nextTick(() => {this.qcCodeKey = +new Date()this.creatQrCode(this.shareForm.shareName)})}methods:{// 保存下载二维码downloadCode() {const qrcode = document.querySelector(`#qrcode_${this.qcCodeKey}`)const canvas = qrcode.querySelector('canvas')const imgurl = canvas.toDataURL('image/jpeg')const a = document.createElement('a')a.href = imgurla.download = this.shareForm.title + '-二维码.png' // 图片名称a.click()},//生成二维码creatQrCode(path) {//销毁二维码 innerHTML = ''（这里也可以加个if判断this.$refs.qrcodeFile!=undefined）this.$refs.qrcodeFile.innerHTML = ''this.qrcodeImg = new QRCode(this.$refs.qrcodeFile, {text: path, // 需要转换为二维码的内容width: 180,             //宽度height: 180,            //高度colorDark: '#000000', //二维码方块颜色colorLight: '#ffffff',  //背景颜色correctLevel: QRCode.CorrectLevel.Q,  //容错率：L M Q H 依次递减})}}
}
</script>

注意点:

1.correctLevel 容错率：L M Q H 依次递减,并且二维码方块密度越高
2.二维码高度宽度不能太低，不然二维码里内容太多展示不下，会报错qrcode length overflow (1632>1056),解决方法为：提供correctLevel 容错率，以及二维码宽度高度给更大一些
3.下载二维码需要给div赋值动态的key，不然会下载缓存里的二维码数据

2.复制到剪贴板

引用插件：

yarn add clipboard@2.0.11

template标签内容

 <div class="qrcodeDownLoad"><a-buttontype="primary"class="tag-read"style="left: 10px":data-clipboard-text="shareForm.shareName"@click="btnCopyShare">复制链接</a-button></div>

script标签内容

<script>
import Clipboard from 'clipboard'
export default {data(){reture{//分享shareForm: {//是否加密passWordVal: 'false',//文件分享的链接shareName: '',//提示message: '',//是否显示二维码isQRCodeShow: true,//抬头title: '',//格式suffix: '',}}},methods:{//复制链接按钮btnCopyShare() {var clipboard = new Clipboard('.tag-read')clipboard.on('success', (e) => {this.$message.success('复制到剪贴板成功!')// 释放内存clipboard.destroy()})clipboard.on('error', (e) => {// 不支持复制this.$message.error('该浏览器不支持自动复制')// 释放内存clipboard.destroy()})}}
}
</script>

vue引用qrcodejs2生成、下载二维码、复制到剪贴板相关推荐

vue将qrcodejs生成的二维码下载到本地
vue将qrcodejs生成的二维码下载到本地 dom结构如下 <div class="qr-code "id="qr-code"></div ...
vue 动态生成下载二维码
菜花记录 vue项目如何动态生成一个下载二维码项目中二维码动态配置好下载链接,现场直接修改配置就可以调试第一步先直接在终端下载vue插件 npm install vue-qriously --sa ...
【Vue+Java】前后端联动生成下载二维码
目录指引背景运用场景环境丑话说在前前端部分通过axios请求传参二次封装axios.create方法定义download方法,通过axios进行传参前端vue页面方法 HTML部分按 ...
vue/html+qrcode生成付款二维码(前端部分)
vue+qrcode生成付款二维码 1.Vue项目中如何使用qrcode生成付款二维码一.安装qrcode.js 二.新建qrcode.vue组件三.项目中引入组件 2.Html项目中如何使用 1 ...
【vue】链接生成为二维码图片-qrcode.js2
通过qrcode.js2将链接生成为二维码图片 npm下载包 npm i qrcode.js2 Demo <template><div ref='qrcode'></di ...
html动态生成下载二维码
一,引包 <script src="js/jquery.qrcode.min.js"></script> <script src="js/j ...
qrcodejs2生成二维码，通过canvas绘制带边框+中间logo的二维码图片，下载二维码
文章目录一.通过qrcodejs2生成一个二维码二.点击[下载配置服务器二维码]来下载二维码 1.通过canvas去绘制边框+二维码+logo (1)为canvas增加绘制圆角矩形的方法(can ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
vue 自动生成二维码，并点击按钮下载二维码
需求:前端根据后端返回的内容生成二维码,点击按钮能下载此二维码 1.npm 引入qrcodejs2 包 (用qrcodejs2 生成的二维码展示效果比较好,推荐使用) npm i qrcodejs2 ...

最新文章

热门文章