vue3 使用qrcodejs2-fix生成二维码并可下载保存

本文主要是介绍vue3 使用qrcodejs2-fix生成二维码并可下载保存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

直接上代码

  <el-button @click='setEwm'>打开弹框二维码</el-button><el-dialog v-model="isShow"  ><div class="content" id="qrCodeUrl" ref="qrCodeUrl"></div><el-button type="primary" @click="saveCode()" >保存二维码</el-button></el-dialog><script>import QRCode from 'qrcodejs2-fix';//需要下载 npm install -s qrcodejs2-fixexport default {data(){return {isShow:false,qrCode:'',QRCode:'',}//生成二维码methods:{//生成二维码setEwm(){this.isShow=true;//打开遮罩层this.QRCode= new QRCode(this.$refs.qrCodeUrl, {text: this.qrCode, // 需要转换为二维码的内容width: 260, // 二维码的宽度height: 260, // 二维码的高度colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, // 二维码的纠错水平})
// 保存二维码
saveCode(name){
//获取二维码中格式为imag的元素const nodeList = Array.prototype.slice.call(this.QRCode._el.children)const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')	
// 构建画布
let canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;        canvas.getContext('2d').drawImage(img, 0, 0)
// 构造url
let url = canvas.toDataURL('image/png')
const a = document.createElement("a")
a.href = url
a.download =`二维码.png`
// 触发a链接点击事件，浏览器开始下载文件 a.click()
},}}</script>

这篇关于vue3 使用qrcodejs2-fix生成二维码并可下载保存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---