vue 使用 vue-qr 插件生成二维码并下载

vue-qr 官方 gitee 地址 https://www.npmjs.com/package/vue-qr

安装vue-qr插件

npm install vue-qr --save

引入vue-qr

// vue2
import vueQr from 'vue-qr'
// vue3
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

例子

<template>
  <div style="text-align: center;">
    <vue-qr 
      :text="qrUrl"
      :callback="qrCallBack" 
      :size="200"
      :margin="10"
      colorDark="green" 
      colorLight="white" 
      logoSrc="/favicon.ico"
      :logoScale="0.2"
      :dotScale="0.7">
    </vue-qr>
    <div style="text-align: center;">
      <button @click="downloadQrcode">下载二维码</button>
    </div>
  </div>
</template>

<script>
// 插件引入
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: 'App',
  components: { vueQr },
  data () {
    return {
      // 用于生成二维码的url
      qrUrl: 'https://www.npmjs.com/package/vue-qr',
      // 下载数据base64
      qrDownloadUrl: ''
    }
  },
  methods: {
    // 二维码刷新后调用
    qrCallBack(qrUrl) {
      this.qrDownloadUrl = qrUrl;
    },
    // 下载二维码
    downloadQrcode() {
      let a = document.createElement('a');
      a.download = '我的二维码';
      a.href = this.qrDownloadUrl;
      a.click();
    },
  }
}
</script>

效果图

属性说明

这个表格是从vue-qr官方文档中粘贴过来的