vue框架通过点击保存按钮下载qrcode-vue生成的二维码到本地

一、qrcode-vue模块

       该模块是用来动态生成二维码的vue模块插件，的底层其实是一个标签。要想使用qrcode.vue插件，需要用vue的脚手架安装这个插件安装指令npm install qrcode --save-dev，在这里我举一个例子。

  


    
  
  
班级二维码

  保存图片

二·、如何点击保存图片进行下载

   点击"保存图片"按钮在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'})

},

三、运行效果如下图所示

点击前：

点击后，弹出下载窗口，进行保存：