vue3生成二维码与保存二维码

1、生成二维码

安装

npm install --save qrcode.vue

页面使用

import QrcodeVue from 'qrcode.vue';

<qrcode-vue id="dwqrcode" :value="qrurl" size="500" level="H" />

value是生成二维码内容

2、保存二维码

可以利用html2canvas来保存二维码

安装

npm install --save html2canvas

保存方法

const qrurl = ref('');


const download = async (imgUrl) => {
  qrurl.value = await imgUrl;
  setTimeout(() => {
    html2canvas(document.querySelector('#dwqrcode')).then((canvas) => {
      const link = document.createElement('a');
      link.download = 'qrcode.png';
      link.href = canvas.toDataURL();
      link.click();
    });
  }, 1000);
};

如果要不在页面展示可以利用css

#my-div {
  position: absolute;
  left: -9999px;
}

如果要在列表自动生成二维码列表可以创建一个组件

<template>
  <div>
    <qrcode-vue ref="qrcode" :value="value" :size="size" level="H" />
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  name: 'QRCode',
  components: {
    QrcodeVue,
  },
  props: {
    value: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      default: 300,
    },
  },
};
</script>

页面使用

import QRCode from '@/components/qrcode/index.vue';

<q-r-code value="内容" size="160" />