最近有个小项目，填写信息生成二维码，再发给人家。发送时需要复制名字 + 二维码图片到微信发送，之前每次是将内容信息复制到草料二维码生成，再复制该用户的名字，粘贴，发送， 再复制图片，粘贴，发送......有时候一次做十几个，重复机械的动作经常要重复十来次，非常麻烦。于是想着优化一下，由前端自己生成二维码，再做一个点击一键复制，甚至不需要点击，填写完毕提交自动复制......将偷懒做到极致。

生成二维码使用的是 qrcodejs2  组件

安装

npm i qrcodejs2

在页面中引入：

import QRCode from 'qrcodejs2';

二维码弹窗：

    <el-dialog :visible.sync="qrCodeVisible" width="600px" style="background-color: black;">
      <p class="pointer" @click="copy(certName)" style="font-size: 25px;font-weight: bold;">{{ certName }}</p>
      <br />
      <div class="pointer" @click="copyQrCode()" id="qrCode" align="center"></div>
    </el-dialog>

其中id为"qrCode"的div，就是用来装二维码的地方。

pointer的class是为了实现鼠标放上去显示手指的效果。

  /*光标呈现为指示链接的指针（一只手）*/
.pointer:hover {
  cursor: pointer;
}

实现文字点击复制：

    copy(item) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', item);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        this.$message.closeAll();
        this.$message({
          showClose: true,
          message: '已复制',
          type: 'success'
        });
      }
      document.body.removeChild(input);
    },

实现生成二维码：

    //生成二维码
    generateQrCode(md5Code) {
      //这里的  'qrCode'  即前面 div 的 id 需要对应
      let container = document.getElementById('qrCode');
      //清空之前的二维码 如果不清空，再次执行本方法，就会有两张图片
      if (container.innerHTML) {
        container.innerHTML = '';
      }
      var qrcode = new QRCode(container, {
        text: this.urlPrefix + md5Code, //这里就是二维码扫描后展示的内容了
        width: 500,
        height: 500,
        colorDark: 'black ',
        colorLight: 'white',
        correctLevel: QRCode.CorrectLevel.L //二维码的纠错等级，等级越高，二维码呈现越复杂，同时被遮挡的多，也能扫出来
      });
    },

调用二维码生成的方法：

    //打开展示二维码的弹窗
    openQrCode(data) {
      this.qrCodeVisible = true;
      this.certName = data.name;
      //这里setTimeOut是延迟执行，作用是等待dom节点挂载，如果不加的话 会报下面的错
      setTimeout(() => {
        this.generateQrCode(data.md5Code);
      }, 100);  //100代表 100毫秒 即0.1s
    },

如果不延迟执行，报错如下：

点击按钮调用方法，打开二维码弹窗：

 看看效果：

 接下来实现点击复制图片：

由于我这里的二维码图片是由前端本地生成，且为base64格式：

 可以看到 src并非url，而是base64字符串。

在看了一众csdn资料后，发现不如直接将base64转为Blob类型，直接写入就好了。

base64转Blob：

    base64ToBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

点击复制二维码：

    //点击复制二维码
    copyQrCode() {
      let container = document.getElementById('qrCode').childNodes[1];
      let myBlob = this.base64ToBlob(container.getAttribute('src'));
      navigator.clipboard.write([new window.ClipboardItem({ [myBlob.type]: myBlob })]);
    }

注意这里获取的dom是qrCode的第二个子节点

document.getElementById('qrCode').childNodes[1]

因为我的图片是由qrcodejs2  生成，实际的dom结构是：

如果直接使用qrCode的dom，点击复制出来的宽度会与原本的不同，并且有白边。

原本图片大小:500 x 500

使用qrCode的dom复制出来的：700 x 625 

不仅大小变大了，缩放后发现左右两边还多了30的白边，反复检查，发现就是dom选择错的问题，直接选择img复制，大小就没问题，并且没有白边。

注意！！！

 navigator.clipboard.write

该方法的确只能在本地localhost 、127.0.0.1 或者 https 协议下使用，否则navigator没有clipboard方法。

由于新版浏览器的安全策略，clipboard只有在安全域名下才可以访问，http域名下会显示undefined，但使用https开头的域名，或localhost，就可以访问navigator.clipboard

粘贴试试：

 

 效果符合预期。

如果图片url是网络上的，是以url形式展示的，建议参考：

​​​​​vue实现点击按钮复制图片(类似浏览器右键复制)_LingSnow1019的博客-CSDN博客_vue实现点击按钮复制图片

其实我的需求没有完全实现，最初想的是点击直接复制【文字+图片】，现在还是得分别复制，在我尝试了一下直接同时复制网页上的图片+文字到QQ聊天窗 或 编辑器、word文档中时，粘贴后发现效果都没问题，都是支持的，而唯独复制到电脑端的微信聊天窗口中，粘贴后文字显示，但图片会不显示，变成了一个空格，既然电脑微信已经不支持，那就不是前端这边能解决的问题了。

勉强将就用用，至少不用再去草料二维码生成一次了。