vue 生成二维码并下载

最新推荐文章于 2024-02-28 09:50:04 发布

＊且听风吟

最新推荐文章于 2024-02-28 09:50:04 发布

阅读量1.2k

点赞数 3

分类专栏： # Vue 2.x

本文链接：https://blog.csdn.net/HH18700418030/article/details/119576092

版权

Vue 2.x 专栏收录该内容

174 篇文章 32 订阅

订阅专栏

vue 项目中需要实现生成二维码，并且下载下来。

引入 qrcode ：

import QRCode from "qrcodejs2"

生成二维码：

    createQRCode () {
      document.getElementById("qrcode").innerHTML = "" 
      let qrcode = new QRCode(this.$refs['qrCodeDiv'], {
        text: 'https://www.baidu.com/',
        width: 188, //生成的二维码的宽度
        height: 188, //生成的二维码的高度
        colorDark: "#666666", // 生成的二维码的深色部分
        colorLight: "#ffffff", //生成二维码的浅色部分
        correctLevel: QRCode.CorrectLevel.H
      })
      this.downloadQRCode()
    }

下载二维码：

    downloadQRCode () {
      let qrcode = document.getElementById('qrcode');
      let img = qrcode.getElementsByTagName('img')[0];
      img.onload = function () {
        this.imgUrl = img.getAttribute("src");
        let link = document.createElement("a");
        link.setAttribute("href", this.imgUrl);
        link.setAttribute("download", '123.png')
        link.click();
      }
    }

点击按钮，生成并下载二维码，如下图：
在这里插入图片描述

完整代码如下：

<template>
  <div class="link-container">   
    <el-button @click="createQRCode">下载二维码</el-button>
    <div id="qrcode" ref="qrCodeDiv"></div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2"
export default {
  name: 'Link',
  components: {
    QRCode
  },
  data () {
    return {      
    }
  },
  props: {
  },
  watch: {},
  created () {    
  },
  methods: {
    createQRCode () {
      document.getElementById("qrcode").innerHTML = "" 
      let qrcode = new QRCode(this.$refs['qrCodeDiv'], {
        text: 'https://www.baidu.com/',
        width: 188, //生成的二维码的宽度
        height: 188, //生成的二维码的高度
        colorDark: "#666666", // 生成的二维码的深色部分
        colorLight: "#ffffff", //生成二维码的浅色部分
        correctLevel: QRCode.CorrectLevel.H
      })
      this.downloadQRCode()
    },
    downloadQRCode () {
      let qrcode = document.getElementById('qrcode');
      let img = qrcode.getElementsByTagName('img')[0];
      img.onload = function () {
        this.imgUrl = img.getAttribute("src");
        let link = document.createElement("a");
        link.setAttribute("href", this.imgUrl);
        link.setAttribute("download", '123.png')
        link.click();
      }
    }
  }
}
</script>

<style lang='less'>
</style>