一、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 
版權宣告：本文為博主原創文章，轉載請附上博文連結！