vue产生二维码并且打包下载

在做一个二开项目,前端使用的vue element-ui. 需求要在列表里面展示二维码,并且可以批量打包下载.
首先我们能确定 在接口里面返回的是二维码链接

展示二维码

1. 在el-table中加入一行来进行二维码的占位

<el-table-column label="二维码" min-width="240px" align="center">
        <template slot-scope="{row}">
          <vue-qr :id="'qr'+row.id" :text="row.code" ></vue-qr>
        </template>
      </el-table-column>

2. 安装vue-qr包,并且引入

1. 安装

npm i vue-qr

2. 引入

import VueQr from ‘vue-qr’

3. 挂载

components:{VueQr},

批量下载二维码

1. 页面加入批量下载按钮

<el-button  class="filter-item" @click="donloadQrcode()">
        批量下载二维码
      </el-button>

2. 加载需要的包

jszip用来进行创建压缩包
HTML2canvas用来进行读取二维码
saveAs 用来进行保存下载

import JSZip from ‘jszip’
import html2canvas from ‘html2canvas’
import saveAs from ‘file-saver’

3. 下载功能实现

// 表格复选框选中状态监听
      selectChange(row){
        this.checkTableData = row;
      },

      // 批量下载二维码
      donloadQrcode(row){
        var zip = new JSZip();
        var CodeDase64 = zip.folder("党员二维码"); //包名称
        if(this.checkTableData == ''){
          this.$message('请选择要下载的二维码');
          return false;
        }
        var loading = this.$loading({
                  lock: true,
                  text: '二维码正在打包',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });
        this.checkTableData.forEach((e, index) => {
                  this.$nextTick(() => {
                      this.htmls(e, index, zip, CodeDase64, loading);
                  });
        })
      },

进行下载以及数据的读取

htmls(row, index, zip, CodeDase64, loading){
        var that = this;
        var htmlName = document.getElementById("qr"+row.id);
        setTimeout(() => {
            html2canvas(htmlName).then((resolve) => {
              let imgUrl = resolve.toDataURL("image/png"); //此时就得到了dom元素转成了base64的图片
              const basePic = imgUrl.replace(/^data:image\/(png|jpg);base64,/, "");
              CodeDase64.file(row.name + ".png", basePic, {
                base64: true,
              });
              if(that.checkTableData.length-1 == index){
                loading.close();
                zip
                  .generateAsync({ type: "blob" }) // zip下载
                  .then((content) => {
                    saveAs(content, "党员二维码.zip"); // zip下载后的名字
                  });
              }
            });
         }, 500);
      },