由於專案需求，第一次寫這種功能，在網上查了好久，最後終於找到個類似的

參考：https://juejin.im/post/6844903869542055950

思路：連結轉化為二維碼，然後利用qrcode轉化為的base64圖片用img加載出來，再利用瀏覽器的長按圖片可以儲存到相簿功能儲存圖片

下面是我自己寫的內容：

1、安裝qrcodejs2 （我這裡安裝預設版本不行，所以指定了一下），然後你只是需要連結轉二維碼的功能，可以安裝@xkeshi/vue-qrcode.js包

npm installqrcodejs2 --save-dev

npm install --save @xkeshi/vue-qrcode //安裝到生產環境

2、使用

<div id="code"><canvas id="canvas" ></canvas></div>

import QRCode from 'qrcode'

getUrlCode() {
  var canvas=document.getElementById("canvas"); //獲取到canvas
  var code=document.getElementById("code");   //獲取到code容器
  QRCode.toCanvas(canvas,this.qrcodeUrl, error=> {
    if (error) {
      
    } else {
      
    }
  })
  var image = new Image();     //例項一個img
  image.src = canvas.toDataURL("image/png");  //轉換成base64格式路徑的png圖片
  image.style.width = "40%";    //設定樣式
  code.appendChild(image);     //新增到code 容器中
  canvas.style.display = "none";   //隱藏掉canvas
},