前端批量生成二维码

二维码批量下载

需求: 根据用户选择的多个编号生成对应的二维码,批量下载压缩包,扫描二维码跳转h5页面把编号带过去查询详细信息

二维码容器 (隐藏)

   
    <div
      id="code-box"
      ref="qrCodeDiv"
      style="position: absolute; left: -1000px; top: -1000px; z-index: -999"
    >
      <div
        v-for="(item, index) in urlList"
        :ref="'code' + index"
        :id="'code' + index"
        :key="index"
      ></div>
    </div>

下载插件

//批量下载二维码---下载插件
import FileSaver from "file-saver";
import JSZip from "jszip";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";

 //标签批量下载勾选--table表格
    selectValHandle(val) {
      this.urlList = [];
      val.forEach((item) => {
        this.urlList.push(item.batteryNo); //编号
      });
    },

   // 批量下载图片
    downloadImg() {
      // 初始化压缩包
      var zip = new JSZip();
      var img = zip.folder("images");
      // 遍历url生成二维码
      let url = "http://XXXXXX/H5" //需要跳转的地址
      this.urlList.forEach((item, index, arr) => {
        var qrcode = new QRCode("code" + index, {
          width: 200, // 设置宽度
          height: 200, // 设置高度
          colorDark: "#000000",
          colorLight: "#ffffff",
          text:  `${url}?batteryNo=${item}`,   //需要跳转的地址--带上编号
        });
        console.log(qrcode, "qrcode");
        // 将生成二维码转换为图片
        html2canvas(document.querySelector("#code" + index), {
          logging: false,
          useCORS: true,
        }).then((canvas) => {
          var imgUrl = canvas.toDataURL("png");
          // 需要对base64进行截取处理,否则无法顺利打包
          var regex = /data:image/.*;base64,/;
          imgUrl = imgUrl.replace(regex, "");
          // 添加进img
          img.file(item + ".png", imgUrl, { base64: true });
          this.$nextTick(() => {
            // 判断如果为最后一张图片
            if (index == arr.length - 1) {
              zip.generateAsync({ type: "blob" }).then(function (content) {
                // 调用api进行下载
                FileSaver.saveAs(content, "二维码.zip");
              });
            }
          });
        });
      });
    },

在h5页面接受参数发请求

  created() {
    //获取二维码信息-电池编号
    let scanCode = location.href.split("=")[1];
    this.init(scanCode);
  },

h5页面嵌套在web项目

px-rem

rem.js 适配

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  var clientWidth = document.documentElement.clientWidth;
  if (!clientWidth) return;
​
  if (clientWidth >= 750) {
    // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
  } else {
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      //手机端
      const scale = document.documentElement.clientWidth / 375
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    } else {
      const scale = document.documentElement.clientWidth / 1920
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
​
  }
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
​