dao本文使用若依框架实现前端生成二维码，并下载二维码到浏览器；（element ui方式实现）

以下功能描述:点击打开二维码后，出现弹窗，弹窗里生成了二维码，并提供下载功能

功能实现演示:

1、打开二维码

 

2、弹窗里生成二维码 ，并能下载该二维码

 

3、代码实现如下:

    (1)、安装QRCode:

npm install qrcodejs2

    (2)、引入qrcodejs2

import QRCode from 'qrcodejs2';

    (3)、代码实现：

        <el-button
            size="mini"
            type="text"
            @click="onItemClick(scope.row)"
          >打开二维码
          </el-button>

    <!-- 二维码弹窗 -->
    <el-dialog :title="title" :visible.sync="show" width="500px" append-to-body>
      <div style="justify-content: center;align-items: center;display: flex;" ref="qrcode"></div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downloadCode">下 载</el-button>
        <el-button @click="cancelDownload">取 消</el-button>
      </div>
    </el-dialog>

// js中的代码如下  

data() {
    return {
      show: false,  // 是否打开二维码弹窗
      qrcode: null,  // 二维码
    }
  },

    //生成二维码
    onItemClick(row){
      this.show = true;
      this.title = '二维码';
      this.$refs.qrcode.innerHTML = ""; //清空二维码,避免生成多个二维码
      this.$nextTick(() => {
        this.qrcode = new QRCode(this.$refs.qrcode, {
          text: row.id, // 替换为你要生成二维码的内容
          width: 200,
          height: 200,
        });
      });
    },

    //下载二维码
    downloadCode(){
      let that = this;
      //获取二维码中格式为imag的元素
      const nodeList = Array.prototype.slice.call(that.qrcode._el.children)
      const img = nodeList.find((item) => item.nodeName.toUpperCase() === 'IMG')	// 选出图片类型
      // 构建画布
      let canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0);
      // 构造url
      let url = canvas.toDataURL('image/png');
      const a = document.createElement("a");
      a.href = url;
      a.download = `二维码.png`;
      // 触发a链接点击事件，浏览器开始下载文件
      a.click();
    },

    // 取消
    cancelDownload(){
      this.show = false;
      this.$refs.qrcode.innerHTML = ""; //清空二维码,避免生成多个二维码
    },