前端生成并下载二维码

刚开始接到这个需求的时候第一时间在想怎么实现呢，前端是怎么生成二维码下载下来呢，这个需求是生成一个二维码签到码给小程序端用户进行签到扫码，那么这个二维码里面放的是什么呢？于是通过其他渠道并跟后端沟通了一下实现的流程。

在index.html引入组件

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

主要代码

export function getQRCode(Eltext) {
  // 获取输入的文本
  // var txt = document.getElementById("txt").value;
  var txt = Eltext;

  // 生成二维码
  let url = new QRCode(document.getElementById("qrcode"), txt);
  // 获取图片路径
  let base64Txt = url._el.querySelector("canvas").toDataURL("image/png"); 
  // 转换类型
  var blob = getBlob(base64Text);

  // 生成完成之后页面创建一个a元素最后实现下载
  var a = document.createElement("a");
  var href = window.URL.createObjectURL(blob);
  a.href = href;
  a.download = "二维码下载"; //a标签的下载属性
  a.click();
  setTimeout(function () {
    window.URL.revokeObjectURL(href); // 释放Url对象
    document.body.removeChild(a);
  }, 100);
}

function getBlob(base64) {
  var mString = base64.split(",")[0].split(":")[1].split(";")[0];
  var bString = atob(base64.split(",")[1]); //base64 解码
  var arrayBuffer = new ArrayBuffer(bString.length); 
  var intArray = new Uint8Array(arrayBuffer); //创建视图
  for (var i = 0; i < bString.length; i += 1) {
    intArray[i] = bString.charCodeAt(i);
  }
  return new Blob([intArray], {
    type: mString,
  });
}

组件代码

// 生成二维码
const handlerUploadCode = debounce(() => {
  // 将后端接口地址以及要传的参数放入二维码，小程序端扫描的时候会直接访问这个地址
  getQRCode(`${BASEURL}/system/volunteerService/report/${props.id}`);
}, 200);