vue-qr批量下载二维码插件封装

1.功能预览

1）界面

2）导出二维码事例

2.使用

1）安装

npm install vue-qr --save
npm install html2canvas --save
npm install jszip --save
npm install file-saver --saver --save

vue-qr：生成二维码样式参考链接

html2canvas：html的二维码转成canvas再转成图片参考链接

jszip ：将图片压缩参考链接

file-saver：将压缩包下载下来参考链接

2）使用

• 代码组件（新建qrCode/index.vue）

/*
 * @Author: duyan
 * @Date: 2020-07-30 11:01:19
 * @Last Modified by: duyan
 * @Last Modified time: 2020-08-03 16:54:02
 */
<template>
  <div>
    <div v-show="codeId" ref="QrcodePage" style="z-index:-1111;position:absolute;width: 800px;left:-999px;overflow:hidden;height: 475px;background-size: cover;">
      <div v-if="codeId" id="qrCode" class="qrCode">
        <QrcodeVue
          :correct-level="3"
          :key="random"
          :callback="texte"
          :text="codeValue"
          :logo-scale="0.3"
          :margin="0"
          :logo-margin="2"
          :size="750"
          logo-src="https://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/yzparkinglogo.png"
        />
        <p style="text-align: center; font-size: 2rem;">{{ codeName }}</p>
      </div>
      <div v-if="codeId" id="qrCode1" class="qrCode">
        <QrcodeVue
          :correct-level="3"
          :logo-src="imageUrl"
          :logo-scale="0.3"
          :margin="0"
          :logo-margin="2"
          :size="750"
          text="http://kmzhtc-app.oss-cn-shenzhen.aliyuncs.com/org.kcsm.yzc/1593422803050_Android_3.0.4_.apk"
        />
        <p style="text-align: center; font-size: 2rem;">云智社区</p>
      </div>
    </div>
  </div>
</template>
<script>
import QrcodeVue from 'vue-qr'
import html2canvas from 'html2canvas'
import JSZip from 'jszip'
import FileSaver from 'file-saver'

export default {
  name: 'Qrcode',
  components: {
    QrcodeVue
  },
  props: {
    qrName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      random: '1',
      codeId: '',
      qrcodeUrl: '',
      imageUrl: 'https://yzwy1-app.oss-cn-shenzhen.aliyuncs.com/yunzhilogo.png',
      // imageUrl: 'https://shop.mmdddd.com/workShopWeb/static/img/72.png',//logo
      qrContentImage: '',
      codeValue: '',
      // initCodeVal: 'http://xcx.nmte.net/tips/index.html',
      codeNumber: '',
      codeName: '',
      arr: [],
      qrcodeArr: [],
      index: 0
    }
  },
  watch: {
    index(newName, oldName) {
      if (newName !== oldName && newName <= this.arr.length - 1) {
        setTimeout(_ => {
          this.setarr(this.arr)
        }, 0)
      } else {
        this.$nextTick(_ => {
          this.$emit('downloadQr', 'finish')
        })
      }
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    texte(url, qid) {
      setTimeout(_ => {
        this.createImgs()
      }, 100)
    },

    setarr(arr) {
      this.arr = arr
      if (this.index > this.arr.length - 1) {
        this.index = 0
      }
      const index = this.index || 0
      this.$emit('downloadQr', 'start')
      this.codeName = this.arr[index].codeName
      if (this.arr[index].codeId) {
        this.codeId = this.arr[index].codeId
        this.codeValue = JSON.stringify(this.arr[index].codeValue)
        console.log(this.codeValue)
        this.random = Math.random()
      } else {
        this.$notify({
          title: '失败',
          message: '二维码信息获取失败，请重试',
          type: 'error'
        })
        this.$emit('downloadQr', 'error')
      }
    },

    createImgs() {
      var that = this
      if (that.index <= that.arr.length - 1 && that.codeId) {
        const shareContent = that.$refs.QrcodePage
        const width = shareContent.offsetWidth
        const height = shareContent.offsetHeight
        const canvas = document.createElement('canvas')
        const scale = 1
        canvas.width = width * scale
        canvas.height = height * scale
        canvas.style.width = (shareContent.clientWidth * scale) / 100 + 'rem'
        canvas.style.height = (shareContent.clientHeight * scale) / 100 + 'rem'
        canvas.getContext('2d').scale(scale, scale)
        const opts = {
          scale: scale,
          canvas: canvas,
          logging: false,
          width: width,
          height: height,
          useCORS: true
        }
        html2canvas(shareContent, opts)
          .then(function(canvas) {
            const qrContentImage = canvas.toDataURL('image/jpeg', 1.0)
            if (that.index <= that.arr.length - 1 && that.codeId) {
              that.qrcodeArr.push({
                url: qrContentImage,
                name: that.arr[that.index].codeName,
                number: that.arr[that.index].codeNumber
              })
            }
            if (that.codeId) {
              that.index++
            }
            if (that.qrcodeArr.length === that.arr.length) {
              that.packageImages()
              that.codeId = null
            }
          })
          .catch(function(reason) {
            console.log(reason)
          })
      }
    },

    packageImages() {
      const that = this
      const zip = new JSZip()
      const cache = {}
      setTimeout(_ => {
        const arr = that.qrcodeArr
        arr.forEach((item, index) => {
          const fileName = item.name
          zip.file(fileName + '.png', item.url.substring(22), { base64: true })
          cache[fileName] = item.url
        })
        zip.generateAsync({ type: 'blob' }).then(content => {
          FileSaver.saveAs(content, this.qrName + '.zip')
        })
      }, 0)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
#qrCode1{
  left: 80% !important;
}
.qrCode {
	width: 300px;
	height: 300px;
	position: absolute;
	top: 52%;
	left: 30%;
	transform: translate(-50%, -50%);
	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}
</style>

• 使用

import QrcodeVue from 'vue-qr'

 // 部件
  components: {   
  	QrcodeVue
  },

• methods中

勾选需要导出的二维码：

// 表格勾选
    selectTable(val) {
      this.delEquipmentList = []
      this.selEquipmentList = val
      val.forEach(val1 => {
        this.delEquipmentList.push(val1.id)
      })
    },

点击导出二维码按钮调用

exportQr(){
  if (this.selAddressList.length) {
            const list = []
            console.log(this.selAddressList)
            this.selAddressList.forEach((val, index) => {
              const params = {
                codeId: val.id,
                codeNumber: val.gateId,
                codeName: val.gateName,
                codeValue: {
                  key: 'address',
                  value: val.gateId
                }
              }
              list.push(params)
              if (index === this.selAddressList.length - 1) {
                console.log(list)
                that.$refs.downloadQr.setarr(list)
              }
            })
          } else {
            this.$notify({
              title: '提示',
              message: '请先勾选需要导出的地点二维码',
              type: 'warning'
            })
          }

// 二维码下载监听
    downloadQr(data) {
      if (data === 'start') {
        this.searchHandle[1].loading = true
        this.searchHandle[1].label = '二维码下载中...'
      } else if (data === 'error') {
        this.searchHandle[1].loading = false
        this.searchHandle[1].label = '重新导出二维码'
      } else if (data === 'finish') {
        this.searchHandle[1].loading = false
        this.searchHandle[1].label = '导出地点二维码'
        this.$notify({
          title: '成功',
          message: '二维码导出成功',
          type: 'success'
        })
      }
    },

• 注意
  二维码样式需要根据自己的需求来进行调整，先将二维码显示，调好样式后再隐藏

2020-08-07日优化

出现问题：
1）二维码不能重新下载
问题解决：

• 判断index为0的时候不处理

• 每次下载的时候将存储图片的数组置空，不然length会出问题