vue导出table数据为zip压缩文件(学习篇)

1、首先在src下新建文件夹vender，将Export2Excel.js和Export2Zip.js文件放到vender文件夹下。这两个js文件可以在我的博客资源中免费下载。0积分下载

2、定义一个点击事件

<el-button size="mini" class="btn-add" @click="handleDownload1()">导出Zipel-button>

3、data中初始化一些数据

downloadLoading: false,
filename: '压缩文件名称'//下载压缩文件名称
singleArray:[],//接口请求到要导出的数据

4、下载压缩文件

//下载为zip文件
handleDownload1() {
     
      this.downloadLoading = true
      //引入需要的Export2Zip.js文件
      import('@/vendor/Export2Zip').then(zip => {
     
      	// 设置表头(就是导出后，execl的中文名字)
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // 列表表头(请求到接口对应的中文名字，英文和上面中文要对应)
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // 深拷贝，不改变原有数组，防止列表数据NaN
        //处理数据这步，有需要翻译的数据才需要拷贝
        let _tmp = JSON.stringify(this.singleArray); //将对象转换为json字符串形式
        let result = JSON.parse(_tmp); //将转换而来的字符串转换为原生js对象
        // 处理数据(接口有的数据需要翻译，如果不进行翻译，导出后execl就是请求到的数据)
        result.forEach((v) => {
     
          Object.assign(v, {
     
          //这里就是对数据进行处理
            createTime: formatDate(v.createTime),
            payTime: formatDate(v.payTime),
            payType: isPayType(v.payType),
            status: isStatus(v.status),
            totalFee: isTotalFee(v.totalFee)
          });
        });
        const list = this.singleArray; //处理后的数据,没有要翻译的，直接将data中的singleArray赋值给list
        const data = this.formatJson1(filterVal, list)
        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
        this.downloadLoading = false
      })
    },
    formatJson1(filterVal, jsonData) {
     
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

5、效果图如下：