Vue使用QrcodeVue生成二维码并下载

生成二维码

1、安装qrcode.vue组件

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: '扫我！', //二维码内容
      size: 300, //二维码大小
    }
  },
  //导入组件
  components: {
    QrcodeVue,
  },
}
script>

下载二维码

使用a标签的download实现下载功能。

<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')
      //创建a标签
      let a = document.createElement('a')
      //获取二维码的url并赋值为a.href
      a.href = canvas[0].toDataURL('img/png')
      //设置下载文件的名字
      a.download = '二维码'
      //点击事件，相当于下载
      a.click()
      //提示信息
      this.$message.warn('下载中，请稍后...')
    },
  },
}
</script>