某溯源平台：vue生成二维码下载

前端做二维码处理，需跳转链接路径（必须），文件名。
懒人，引用了vue-qr 很好用，贴部分代码

<vue-qr
                :text="listItem.traceCodeUrl"
                :margin="0"
                color-dark="#000"
                color-light="#fff"
                :logo-scale="0.3"
                :size="200"
                :qid="listItem.traceCode+''"
                :callback="getqrpath"
              />

这里注意:callback 参数，显示二维码图片base64路径(重要)，下载时用。
创建一个二维码数组：

 getqrpath(dataUrl, id) {
      this.downCodeGroup.push({ traceCodeUrl: dataUrl, traceCode: id })
    },

下载每个二维码点击的话，需要1，匹配数组对象，2. 下载处理

// 匹配数组对象
    searchImg(arr, keyWords) {
      return arr.filter(function (value) {
        return value['traceCode'].match(keyWords);
      })
    },
    // 下载
    downsItemImg(listItem) {
      console.log(listItem.traceCode, 'downitemimg')
      var searchUsers = this.searchImg(this.downCodeGroup, listItem.traceCode);
      if (searchUsers.length < 2) {
        this.downloadIamge(searchUsers[0].traceCodeUrl, searchUsers[0].traceCode)
      }
    },
    // 下载处理
    downloadIamge(imgsrc, name) { // 下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous');
      image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL('image/png'); // 得到图片的base64编码数据

        var a = document.createElement('a'); // 生成一个a元素
        var event = new MouseEvent('click'); // 创建一个单击事件
        a.download = name || 'photo'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    }

下载ok