前端实现生成二维码，提供下载功能

在项目中可以通过element-ui结合qrcodejs2插件实现二维码的生成，并且提供下载功能。本文将展示如何在弹窗中生成二维码并提供下载的功能。

安装插件

首先需要安装qrcodejs2插件：

yarn add qrcodejs2

项目引入

在项目中引入qrcodejs2库：

import QRCode from 'qrcodejs2';

示例代码

HTML部分

<el-table-column label="管理端卡号" align="center" prop="cardAdminNo" width="180">
  <template slot-scope="scope">
    <el-button size="mini" type="text" @click="onAdminClick(scope.row)">
      {{scope.row.cardNo}}
    </el-button>
  </template>
</el-table-column>

<el-dialog title="二维码" :visible.sync="show" width="300px">
  <div class="qrcode" ref="qrcode"></div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancelDownload">取消</el-button>
    <el-button type="primary" @click="downloadCode">下载二维码</el-button>
  </span>
</el-dialog>

JS部分

import QRCode from 'qrcodejs2';

export default {
  data() {
    return {
      show: false,
      title: '',
      qrcodeTitle: '',
      qrcode: null,
    };
  },
  methods: {
    onAdminClick(row) {
      const no = row.uniqueCode;
      const url = 'https://www.XXX.cn/admin.html?iid=' + no;
      this.show = true;
      this.title = '管理端二维码';
      this.qrcodeTitle = '管理端二维码 ' + row.cardAdminNo;

      if (this.$refs.qrcode) {
        this.$refs.qrcode.innerHTML = ""; // 清空二维码，避免重复生成
      }

      this.$nextTick(() => {
        this.qrcode = new QRCode(this.$refs.qrcode, {
          text: url,
          width: 200,
          height: 200,
        });
      });
    },
    downloadCode() {
      const nodeList = Array.prototype.slice.call(this.qrcode._el.children);
      const img = nodeList.find(item => item.nodeName.toUpperCase() === 'IMG'); // 获取二维码图片

      // 构建画布
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0);

      // 生成下载链接
      const url = canvas.toDataURL('image/png');
      const a = document.createElement("a");
      a.href = url;
      a.download = this.qrcodeTitle + `.png`;
      a.click(); // 触发下载
    },
    cancelDownload() {
      this.show = false;
      this.$refs.qrcode.innerHTML = ""; // 清空二维码，避免生成多个
    },
  },
};

样式部分

<style lang="scss">
  .qrcode {
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .qrcode img {
    width: 200px;
    height: 200px;
  }
</style>

代码解释

生成二维码：
- 点击按钮后，调用onAdminClick方法，生成一个基于唯一编码（uniqueCode）的二维码。
- 使用QRCode库生成二维码，并通过$nextTick确保在DOM更新完成后插入二维码。
下载二维码：
- 通过downloadCode方法获取生成的二维码图像（IMG），并绘制在canvas上。
- 将canvas转换为图片URL，使用<a>标签的download属性触发下载。
取消二维码显示：
- 点击取消按钮调用cancelDownload方法，隐藏弹窗并清空二维码。