vue3封装批量生成二维码海报图组件

第一、下载依赖包

npm install html2canvas --save
npm install jszip --save
npm install qrcodejs2-fix --save
npm install file-saver --save

第二步、组件封装

<template>
  <div class="down-image">
    <div id="qrid-box">
      <img :src="bgImg" alt="" class="qdid-img" />
      <div
        class="code-box"
        :class="{ 'left-center': leftDistance == 0 }"
        :style="{
          bottom: bottomDistance + 'px',
          width: size + 'px',
          height: size + 'px',
          left: leftDistance == 0 ? '50%' : leftDistance + 'px',
        }"
      ></div>
    </div>
    <div class="down-mask" v-show="isGenera">
      {{ maskMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import html2canvas from "html2canvas";
import JSZip from "jszip";
import QRcode from "qrcodejs2-fix";
import FileSaver from "file-saver";
const props = defineProps({
  // 数据列表
  dataList: {
    type: <any>Array,
    required: true,
    default: [],
  },
  // 生成的地址链接
  url: {
    type: String,
    required: true,
    default: "",
  },
  //  需要拼接的参数 可以穿字符串或者数组字符串
  params: {
    type: <any>Array,
    required: true,
    default: [],
  },
  //   背景图
  bgImg: {
    type: String,
    required: true,
    default: "",
  },
  //   二维码大小 默认120
  size: {
    type: Number,
    required: false,
    default: 120,
  },
  //   距离左边距离 不为0
  leftDistance: {
    type: Number,
    required: false,
    default: 0,
  },
  //   距离底部距离
  bottomDistance: {
    type: Number,
    required: false,
    default: 30,
  },
});
// 蒙版内容
const maskMessage = ref("正在批量生成中...");
// 是否正在生成
const isGenera = ref(false);
// 图片列表
let imgList: any[] = [];
// 参数处理
const paramsHandel = (item: any) => {
  let params = "?";
  // array类型
  if (typeof props.params == "object") {
    // 需要匹配的参数名
    let arr = props.params;
    arr.forEach((arrItem: any) => {
      // 参数名拼接
      let str = `${arrItem}=${item[arrItem]}&`;
      params = params + str;
    });
  } else {
    console.warn("参数需要为数组类型");
  }
  if (params.indexOf("&") != -1) {
    params = params.slice(0, params.length - 1);
  }
  return params;
};
// 生成二维吗
const generaCode = (item: any) => {
  let code: any = document.querySelector(".code-box");
  //   清空元素
  code.innerHTML = "";
  let params = paramsHandel(item);
  //   生成二维码
  let qrcode = new QRcode(code, {
    text: props.url + params, //二维码内容
    width: props.size - 30,
    height: props.size - 30,
    render: "table",
    colorDark: "#333333", //二维码颜色
    colorLight: "#ffffff", //二维码背景色
    correctLevel: QRcode.CorrectLevel.H,
  });
};
// 创建压缩包
const generaZip = (list: any[]) => {
  if (list.length <= 0) {
    console.warn("dataList参数为空");
    return;
  }
  //创建压缩对象
  var zip = new JSZip();
  let num = 1;
  for (const QRcodeIterator of list) {
    //第一个参数是图片名字和后缀
    zip.file(
      `test_${num}.png`,
      QRcodeIterator.imgurl.replace(/^data:image\/(png|jpg);base64,/, ""),
      { base64: true }
    );
    num++;
  }
  //下载压缩包
  zip.generateAsync({ type: "blob" }).then(function (content: any) {
    FileSaver(content, "二维码.zip");
  });
  isGenera.value = false;
};
// 定时器
const timmer = () => {
  setTimeout(() => {
    if (isGenera.value == true) {
      maskMessage.value = "当前生成文件较多,请耐心等候...";
    }
  }, 5000);
  setTimeout(() => {
    if (isGenera.value == true) {
      maskMessage.value = "文件还在努力生成...";
    }
  }, 10000);
};
// 生成海报图
const generateImg = async () => {
  if (props.url == "") {
    console.warn("url参数为空");
    return;
  }
  //蒙层
  isGenera.value = true;
  //   提示文字
  timmer();
  let qridElement: any = document.querySelector("#qrid-box");
  //   遍历数据项
  for (const item of props.dataList) {
    // 生成二维码
    generaCode(item);
    // 创建截图
    await html2canvas(qridElement).then(function (canvas) {
      //根据截图生成的图片
      const qrContentImage = canvas.toDataURL("image/png", 1.0);
      imgList.push({
        imgurl: qrContentImage,
      });
    });
  }
  //   生成了多张图片时
  if (imgList.length > 0) {
    generaZip(imgList);
  }
};
// 初始化
const init = () => {
  generateImg();
};
// 暴露组件函数
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
.down-image {
  position: absolute;
  bottom: 0;
  left: -9999999px;
  width: 375px;
  #qrid-box {
    width: 100%;
    .qdid-img {
      width: 100%;
    }
    .code-box {
      position: absolute;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
    }
  }
}
.left-center {
  left: 50%;
  transform: translateX(-50%);
}
.down-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  font-size: 24px;
}
</style>

第三步、调用

<DownImage
      :dataList="state.dataList"
      :url="'https://www.baidu.com'"
      :params="{one:'1'}"
      :bgImg="bgImg"
      :size="100"
      ref="downImage"
    ></DownImage>

//组件实例
const downImage = ref(null);
//调用海报生成并下载
downImage.value.init();

四、参数说明

参数名	参数类型
dataList	[{}] 数组对象 必填
url	string 必填
params	[‘xxx’] 数组 必填
bgImg	string 必填
size	number 默认120 不必填
leftDistance	number 默认0 ， 0代表水平居中 不必填
bottomDistance	number 默认30 不必填

五、事件

函数名	函数解释
init	生成并下载海报图；调用方法见第三步示例