VUE下批量生成二维码图片并打包下载到本地

VUE下批量生成二维码图片并打包下载到本地

需求

公司要求批量选择企业树内的企业，生成企业信息的二维码图片压缩包。

依赖

npm i -s file-saver
npm i -s jszip
npm i -s qrcodejs2

代码

<template>
  <basicContainer>
    <div id="printer" :ref="`qrCode`" style="display:none" class="codeStyle" />
    <button @click="createQrCode">生成二维码</button>
  </basicContainer>
</template>

<script>

import JSzip from 'jszip'
import { saveAs } from 'file-saver'
import QRCode from 'qrcodejs2';


export default {
  data () {
    return {
      qrData: ['qrCodeStr1', 'qrCodeStr2']
    };
  },
  mounted () {

  },
  watch: {
  },
  methods: {
    createQrCode () {
      // 初始化qrCode实例
      let qrCode = new QRCode(this.$refs.qrCode, {
        width: 200,
        height: 200,
        render: 'canvas',
        correctLevel: QRCode.CorrectLevel.H
      })
      let that = this
      function greet () {
        // 数据多的话，异步执行二维码生成。
        var promise = new Promise(function (resolve, reject) {

          let imageDataAry = []

          // 逐个生成二维码图片
          that.qrData.forEach((item, index) => {

            // 清空上一次生成的二维码
            qrCode.clear()

            // 创建新的二维码
            qrCode.makeCode(item)

            // 通过 canvas 获取二维码图片的base64数据
            let canvas = document.querySelector('canvas')
            var pic = canvas.toDataURL('image/png')

            // 存储二维码base64数据
            imageDataAry.push(pic)

          })
          resolve(imageDataAry)
        })
        return promise
      }

      // 执行zip操作
      greet().then(v => {

        // zip 实例
        const zip = new JSzip()

        v.forEach((item, index) => {

          // base64数据转换
          const blob = this.base64ToBlob(item);
          console.log(blob)
          // 二进制数据存入 zip 实例
          zip.folder('二维码文件').file(`二维码_${index}.png`, blob, { binary: true })

        })

        // 生成二进制流
        zip.generateAsync({
          type: 'blob'
        }).then(content => {
          // 保存zip文件
          saveAs(content, '二维码文件.zip')
        })
      })
    },
	
	// base64数据转换
    base64ToBlob (code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {
        type: contentType
      });
    },
  },
}
</script>

建议

我们的企业树没有太多的数据，如果你的数据量比较大，建议对二维码图片生成处的代码进行一些细节优化处理。