npm install --save qrcode.vue

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
  </div>
</template>
<script>
//導入組件
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '掃我！', //二維碼內(nèi)容
      size: 300, //二維碼大小
    }
  },
  //導入組件
  components: {
    QrcodeVue,
  },
}
</script>

<template>
  <div id="app">
   <qrcode-vue :value='value' :size='size'></qrcode-vue><br />
   <button v-on:click="download()" id="download">下載</button>
  </div>
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
  name: 'App',
  data() {
    return {
      value: '別掃我！',
      size: 300,
    }
  },
  components: {
    QrcodeVue,
  },
  methods: {
    download() {
      //獲取canvas標簽
      let canvas = document.getElementById('app').getElementsByTagName('canvas')
      //創(chuàng)建a標簽
      let a = document.createElement('a')
      //獲取二維碼的url并賦值為a.href
      a.href = canvas[0].toDataURL('img/png')
      //設(shè)置下載文件的名字
      a.download = '二維碼'
      //點擊事件，相當于下載
      a.click()
      //提示信息
      this.$message.warn('下載中，請稍后...')
    },
  },
}
</script>