vue引用qrcodejs2生成、下载二维码、复制到剪贴板
2023-09-11 14:19:18 时间
使用的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 = imgurl
a.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-button
type="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项目优化,echart实例
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- 【Vue】通过【总线bus】方式实现【兄弟组件】之间参数传递(图文+代码示例)
- 【Vue】单文件的组件(.vue)代码实例
- 每日一学—Vue prop属性
- Vue: pinia
- springboot+mybaitsplus+vue简单的CURD
- vue 实践技巧合集
- vue cli选择lint模式
- Vue 国际化之 vue-i18n 的使用
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- vue v-html解析不了rn 解决方案
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
- Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)
- Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法
- Vue的7种事件修饰符的使用