js脚本实现vue批量下载（二维码）

声明一下我这个批量下载是无接口实现的

哥们也是翻烂了CSDN和NPM插件库，效果呢虽说大差不差，但是都是接口实现的；废话说不多说上教程：

首先template，定义qrcode元素，v-show是我不想让这个二维码展现出来，所以才加的。

 <el-button type="primary" @click="createQRCode">批量下载</el-button>
 <div v-show="false" class="QRcode" ref="qrCodeDiv" id="QRcode"></div>
 
<div style="height:15%;display: flex;align-items: center;justify-content: center;">
          <el-pagination background layout="prev, pager, next,jumper" :total="page.total"
            :current-page.sync="to_get_list_data.page" :hide-on-single-page="page.total < 11" :page-size="page.limit"
            @current-change="get_list(false)" />
        </div>

script，引入qrcode2，前提是你得安装npm i qrcode2,

<script>
import QRCode from 'qrcodejs2'
var qrcode
var time
export default{
	data() {
    	return {
    		 tableData_index: 0, //定义索引
      		tableData_num: 0, //总数
      		QRCode_box:"",
      		tableData:[], //这个是el-table 属性ref的值，你获取到的数据赋值给他，我的是后端返回里面有qrcode值
      		to_get_list_data: {
        		page: 1,
       			 pageSize: 10
     		 },
		}
	},
	
}
</script>

下面是生成二维码的方法和下载的方法，遇到异步不会就用定时器

medthods:{
	createQRCode() {
      var _this = this;
      document.getElementById('QRcode').innerHTML = '' //如果想要批量下载就得把上一个生成的清空掉
      // console.log(JSON.stringify(document.getElementById('QRcode')));
      this.QRCode_box = ''
      this.QRCode_box = new QRCode(this.$refs['qrCodeDiv'], {
        text: _this.tableData[_this.tableData_index].qrcode, //这里就可以省去for或者forEach循环，把索引值拿到后面跟二维码的参数
        width: 188, //生成的二维码的宽度
        height: 188, //生成的二维码的高度
        correctLevel: QRCode.CorrectLevel.H
      })
      //想要单个下载的把settimeout和if判断去掉
      setTimeout(() => {
        var qrcode = document.getElementById('QRcode');
        var img = qrcode.getElementsByTagName('img')[0];
        
        setTimeout(() => {
          _this.imgUrl = img.getAttribute("src");
          var link = document.createElement("a");
          link.setAttribute("href", _this.imgUrl);
          link.setAttribute("download", “文件名字” + ".png")
          link.click(); //如果只是单个下载到这里就结束了，批量下载跟一个异步判断下一页如果有就会自动跳转下一页，继续下载，直到停止
          
          time = setTimeout(() => {
            if (_this.tableData_index >= _this.tableData_num - 1) {
              //判断下一页
              if (_this.to_get_list_data.page >= _this.page.total) {
                return _this.page.total //如果没有就返回 或者停止
              } else {
                _this.to_get_list_data.page++
                _this.get_list(function () {  
                  _this.tableData_index = 0
                  _this.createQRCode() //再次执行下载
                })
              }

            } else {
              _this.tableData_index++
              _this.createQRCode() 
            }
          }, 10)
        }, 500)
      }, 100)

    },
	}

这里是我请求数据体，getlist是我请求表里的数据，执行回调callback，这里面没必要的我删除了，最主要的还是callback回调函数

get_list(callback) {
      var _this = this
      seeList(_this.to_get_list_data).then(e => {
        console.log(e);
        _this.isDisabled = false
        if (e.code == 0) {
          _this.$message({
            message: '获取成功',
            type: 'success'
          })
          _this.to_get_list_data.page = Number(e.data.page)
          _this.page.total = Number(e.data.count)
			
          _this.tableData = e.data.data
          _this.tableData_num = _this.tableData.length
          if (callback) {
            callback()
          }
        } 
      })
    },

源码：
二维码我不需要展示，随便找个地方放了

这是分页

参数值

总结就到这里，不明白的可以评论@我，反正原理都是下载