vue-qr生成二维码并下载

最新推荐文章于 2024-02-02 14:36:17 发布

天高任鸟飞dyz

最新推荐文章于 2024-02-02 14:36:17 发布

阅读量719

点赞数 4

分类专栏： web前端 Vue JavaScript 文章标签： qr

本文链接：https://blog.csdn.net/yzding1225/article/details/119395367

版权

web前端同时被 3 个专栏收录

55 篇文章 4 订阅

订阅专栏

JavaScript

28 篇文章 0 订阅

订阅专栏

Vue

24 篇文章 1 订阅

订阅专栏

1.引入

import vueQr from 'vue-qr'

2.html

<vue-qr
  ref="Qrcode"
  :text="地址"
  :margin="15"
  :size="500"
  :width="290"
  />
<el-button
  type="success"
  @click="getQrCode('Qrcode', '二维码')"
  >下载二维码</el-button>

3.js

// refName ref名称   name下载文件名称
getQrCode(refName, name) {
  const iconUrl = this.$refs[refName].$el.src
  const a = document.createElement('a')
  const event = new MouseEvent('click')
  a.download = name
  a.href = iconUrl
  a.dispatchEvent(event)
}

4.常用属性介绍