vue实现根据链接生成带logo二维码，并下载

前端宝库

已于 2022-04-06 19:40:04 修改

阅读量1.3k

点赞数

文章标签： vue

于 2022-04-06 19:27:32 首次发布

本文链接：https://blog.csdn.net/weixin_64141611/article/details/123997572

版权

第一步，下载插件

npm install vue-qr --save

第二步，页面中使用

<template>
  <vue-qr
    ref='Qrcode'
    :logo-src="logoSrc" // logoSrc 二维码中间logo图片（选填）默认无
    :size="size" // 二维码尺寸
    :margin="0" // 二维码外边距
    :text="appSrc" // 生成二维码连接
  />
  <Button size='small' @click="downloadImg">下载二维码</Button>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  name: 'QrCode',
  props: {
    // 被生成二维码连接（必填）
    appSrc: {
      type: String,
      default: ''
    },
    // 二维码中间logo图片（选填）
    logoSrc: {
      type: String,
      default: ''
    },
    // 二维码尺寸（选填）
    size: {
      type: Number,
      default: 150
    }
  },
  components: {
    VueQr
  },
   methods: {
    // 下载二维码
    downloadImg () {
      const iconUrl = this.$refs['Qrcode'].$el.src
      const a = document.createElement('a')
      const event = new MouseEvent('click')
      a.download = fileName // 定义下载的二维码文件名
      a.href = iconUrl
      a.dispatchEvent(event)
    }
   }
}
</script>

以下是二维码可用属性一览

text:  //编码的内容，不能为空且必须要有值
size: 尺寸, 长宽一致, 包含外边距
margin: 二维码图像的外边距, 默认 20px，一定要设置为零，否则会被莫名奇妙的压缩
colorDark: 实点的颜色
colorLight: 空白区的颜色
bgSrc: 欲嵌入的背景图地址，一般不用，会比较花哨
backgroundColor	：背景色（默认白色）
logoSrc: 欲嵌入至二维码中心的 LOGO 地址，头像图片
logoMargin: LOGO 标识周围的空白边框, 默认为0
logoBackgroundColor：Logo 背景色,需要设置 logo margin（默认白色）