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

<!-- 二维码 -->
<el-dialog
   title="我的专属二维码"
   :visible.sync="dialogVisible"
   width="540px"
   @opened="openQrCode"
>
  <div class="qrcode">
     <div id="qrcode" />
  </div>
  <div class="qrcodeBtn">
    <el-button type="primary" @click="saveQrcode">保存到本地</el-button>
  </div>
</el-dialog>

import QRCode from 'qrcodejs2'

export default {
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    openQrCode() {
      document.getElementById('qrcode').innerHTML = ''
      const qrcode = new QRCode('qrcode', {
        width: 250,
        height: 250
      })
      qrcode.makeCode("二维码内容")
    },
    saveQrcode() {
      //找到canvas标签
      const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
      //创建一个a标签节点
      const a = document.createElement('a')
      //设置a标签的href属性（将canvas变成png图片）
      a.href = myCanvas[0].toDataURL('image/png').replace('image/png', 'image/octet-stream')
      //设置下载文件的名字
      a.download = '我的专属二维码.png'
      //点击
      a.click()
    }
  }
}

提示:二维码一开始并没有选中相应的容器，因为dialog加载需要时间，所以二维码生成函数写在dialog的打开回调中，避免错误。