vue js前端根据所需参数生成二维码并下载

1. 需要一个插件 qrcodejs2， 使用 npm install qrcodejs2 --save 下载该依赖包。
2. 在vue中引入(我这边是vue2)。import QRCode from 'qrcodejs2';
3. 在计算属性中使用它。

 computed: {
    QRCode,
  },

4. 在dom结构中设置一个容器来承载它，并设置一个id.

   <div id="qrcode" style="display: none"></div>  // 如果要显示这个二维码就不要设置display:none   

然后可以在需要下载生成二维码的地方触发这个事件

5. 生成二维码。

 qrcode(val) {  // 生成二维码函数
  document.getElementById('qrcode').innerHTML = '';  // 清空dom元素内容，防止污染canvas 
      const qrcode = new QRCode('qrcode', {
        width: 200,
        height: 200, // 高度
        text: 'http://wx.qlogo.cn/mmhead/Q3auHgzCEVqspSUMou272WfP9OAJ1dNl0zr6uQ/0xxx', // 二维码内容  这个自己跟换地址 内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        background: '#f0f', // 背景色
        foreground: '#ff0', // 前景色
      });
      console.log(qrcode, 'qrcode');
      this.saveImg(); // 下载函数
      return qrcode;
      // console.log(qrcode, '444444');
    },

6. 生成二维码后就调用下载(如果你们只需要生成二维码就不需要这步)

   saveImg() {
      // 找到canvas标签
      const cvs = document.getElementById('qrcode').getElementsByTagName('canvas');
      console.log(cvs, '[[');
      // 创建一个a标签节点
      const a = document.createElement('a');
      // 设置a标签的href属性（将canvas变成png图片）
      a.href = cvs[0].toDataURL('image/png').replace('image/png', 'image/octet-stream');
      // 设置下载文件的名字
      a.download = 'qrcode.png';
      // 点击
      a.click();
    },

到此就完成了前端根据参数生成二维码，并下载。

项目需求 使用element 表格 来动态生成二维码，要求鼠标移入时显示二维码。
注意这里code 函数是放在 methods 里面的，不要试图使用计算属性来触发，有可能会重复渲染二维码。

截出部分项目中代码

         <template v-if="item.prop === 'linkCodeUrl'" #default="{ $index }">
              <p class="p" @click="copy(data[$index])">复制链接</p>

              <el-popover popper-class="cloud-qrcode" placement="right" width="200" trigger="hover">
                <div :id="`qrcode${$index}`"></div>
                <span
                  slot="reference"
                  class="p"
                  @click="downloadCode(data[$index], $index)"
                  @mouseover="code(data[$index].id, $index)"
                >
                  下载二维码
                </span>
              </el-popover>
            </template>

js部分

    code(val, index) {
      console.log(index, 'pindex');
      this.$nextTick(() => {
        document.getElementById(`qrcode${index}`).innerHTML = '';
        const url = xxxxxx?id=${val}`;
        const qrcode = new QRCode(`qrcode${index}`, {
          width: 200,
          height: 200,
          text: url,
          background: '#f0f',
          foreground: '#ff0',
        });
        return qrcode;
      });
    },

效果图：