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

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

2、定义一个点击事件

<el-button size="mini" class="btn-add" @click="handleDownload1()">导出Zip</el-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赋值给listconst 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、效果图如下：

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

Python将Pandas中Dataframe数据保存为gzip/zip文件：gzip压缩文件、zip压缩文件
Python将Pandas中Dataframe数据保存为gzip/zip文件:gzip压缩文件.zip压缩文件目录 Python将Pandas中Dataframe数据保存为gzip/zip文件:gz ...
ssis zip压缩文件_SSIS平面文件与原始文件
ssis zip压缩文件 In this article, we will give an overview of using Flat Files and Raw Files in SSIS, th ...
ssis zip压缩文件_在SSIS中处理参差不齐的正确格式的文件
ssis zip压缩文件 In the world of SSIS development architecture, preference should be given to extracting ...
同事说rar压缩有风险，让我用zip压缩文件
在现在最常见的压缩文件有zip.rar.7z三种,它们都有各自的优点和缺点. 我们用一句话来概括一下:7z压缩率最高,RAR安全性高,ZIP使用范围广. 文件压缩打包是最为常见的一种分享方式了,而众多 ...
Java建立Zip压缩文件的代码实例
Java建立Zip压缩文件的代码实例 Java代码 import java.io.*; import java.util.zip.*; class Zip { public static void m ...
zipfile — 访问 ZIP 压缩文件
zipfile - 访问 ZIP 压缩文件 1.概述 zipfile 模块可用于操作 ZIP 存档文件,.zip 是 PC 程序 PKZIP 推广的格式 2.测试数据为了演示用,你需要创建以下三个文 ...
4、Linux：如何在zip压缩文件中搜索指定内容
我们知道,Linux 是支持多种的打包技术的,其中包括了 zip 压缩.最近呢,遇到了在 zip 压缩文件中搜索特定的字符串内容的需求.我试图从 grep.sed 及 awk 等命令中尝试实现这种搜索 ...
标题vue导出表格数据，excel表格打不开
vue导出表格数据,excel表格打不开代码如下,当时是将**responseType: 'blob'**写在{headers: getHeader() }外面,导致问题一直没解决,后来经过度娘,了 ...
android下zip压缩文件加密解密的完美解决方案,Android之zip文件加密解压及进度条的实现...
zip文件的解压可以使用java的zip库,但是没有实现对加密文件的解压功能,这里可以使用zip4j来实现.具体可以参看该文<Android下zip压缩文件加密解密的完美解决方案 http:// ...

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

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

2、定义一个点击事件

3、data中初始化一些数据

4、下载压缩文件

5、效果图如下：

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

最新文章

热门文章