一、qrcode-vue模块
该模块是用来动态生成二维码的vue模块插件，<qrcode-vue></qrcode-vue>的底层其实是一个<canvas></canvas>标签。要想使用qrcode.vue插件，需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev，在这里我举一个例子。
<el-col :span="6" class="item">
<div class="code">
<!--生成二维码-->
<qrcode-vue :value='shareUrl' :size='qrCodeSize' className='qrcode' id="picture" ref="code"></qrcode-vue>
</div>
<p class="">班级二维码</p>
<!--保存图片按钮-->
<el-button round size="small" @click="savePic">保存图片</el-button>
</el-col>
二·、如何点击保存图片进行下载
点击"保存图片"按钮在methods中写如下点击事件对应方法：
//保存图片
savePic(){
//找到canvas标签
let myCanvas = document.getElementById('picture').getElementsByTagName('canvas');
//创建一个a标签节点
let a = document.createElement("a")
//设置a标签的href属性（将canvas变成png图片）
a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
//设置下载文件的名字
a.download = "班级二维码"
//点击
a.click()
//弹出提示
this.$message({message:'亲，正在进行下载保存',type:'warning'})
},
三、运行效果如下图所示
点击前：
点击后，弹出下载窗口，进行保存：
---------------------
作者：君择城
来源：CSDN
原文：https://blog.csdn.net/cheng549309240/article/details/81187949?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！