【vue】vue项目批量下载二维码,且打包成压缩包.

在这里插入图片描述

一. 先看效果演示

在这里插入图片描述

二. 下插件

npm i vue-qr -S // 二维码显示插件 我的版本^4.0.9
npm i html2canvas -S // 将二维码转为图片 我的版本^1.4.1
npm i file-saver -S // 下载图片 我的版本^2.0.5
npm i jszip -S // 打包成压缩包 我的版本^3.10.1
// 一次性下载
npm i vue-qr html2canvas file-saver jszip -S

三. 批量显示二维码

来一个el-dialog

      <!-- 二维码列表 -->
      <el-dialog title="机构二维码" :visible.sync="qrDialog" width="64%" :modal="true" :close-on-click-modal="false" v-dialogDrag center>
        <div class="qrList">
          <div v-for="item in qrImgList" :key="item.index" :ref="'canvas' + item.id">
            <span>{{ item.name }}</span>
            <vue-qr :text="item.text" :size="200" :margin="0" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="qrDialog = false">关 闭</el-button>
          <el-button type="primary" @click="qrConfirmClk">全部下载</el-button>
        </span>
      </el-dialog>
      <script>
		import VueQr from 'vue-qr'
		import { saveAs } from 'file-saver'
		import html2canvas from 'html2canvas'
		import JSZip from 'jszip'
		export default {
		  components: { VueQr },
		  data(){
			return{
		      qrDialog: false,
			  qrImgList: [],
			}
		  }
		}
      </script>

四. 批量下载二维码并打包成zip

    // 批量下载二维码
    qrConfirmClk() {
      const zip = new JSZip()
      const imgFolder = zip.folder('images')
      let flag = 0
      for (let i = 0; i < this.qrImgList.length; i++) {
        html2canvas(this.$refs[`canvas${this.qrImgList[i].id}`][0]).then((canvas) => {
          let base64 = canvas.toDataURL('image/png')
          base64 = base64.split('base64,')[1]
          imgFolder.file(this.qrImgList[i].name + '.png', base64, { base64: true }) // 文件名
          if (flag === this.qrImgList.length - 1) {
            zip.generateAsync({ type: 'blob' }).then((blob) => {
              saveAs(blob, '二维码图片.zip') // 压缩包名字
            })
          }
          flag++
        })
      }
    },