前言

需求：前端实现导出Table中所有数据（不止是当前页面显示数据），生成excel。
实现：递归调用接口，使用file-saver、xlsx插件导出数据。

一、安装file-saver、xlsx插件

npm i file-saver --save
npm i xlsx --save

二、创建export.ts文件

创建 exportList 方法：

import XLSX from 'xlsx';
import FileSaver from 'file-saver';
import _ from 'lodash';export const exportList = (title: string, headers: string[], values: any) => {try {//如果value的json字段的key值和想要的headers值不一致时，可做如下更改//将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值const keyMap: any = {winnerId: 'ID',winnerNickName: '昵称',prizeName: '名称',prizeType: '类型',winTime: '时间',receiving: '地址',};const data = values.map((i: any) => {const ne = _.cloneDeep(i);const rzt = {..._.pick(ne, headers),};//改变key值为要求的excel的title值,但是edge不兼容，ca// const newRzt = Object.fromEntries(Object.entries(rzt).map(([k, v]) => [keyMap[k]||k, v]))const newRzt = Object.keys(rzt).reduce((newData: any, key) => {//上面的方法不兼容，所以用了这个方法处理headersconst newKey = keyMap[key] || key;newData[newKey] = rzt[key];return newData;}, {});return newRzt;});if (_.isEmpty(values)) {return;}const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象const ws = XLSX.utils.json_to_sheet(data); //将json对象数组转化成工作表ws['!cols'] = [//设置每一列的宽度{ wch: 20 },{ wch: 42 },{ wch: 40 },{ wch: 25 },{ wch: 30 },{ wch: 75 },];XLSX.utils.book_append_sheet(workbook, ws, 'sheet1'); //把sheet添加到workbook里，第三个参数是sheet名const wopts: any = { bookType: 'xlsx', bookSST: false, type: 'array' }; //写入的样式bookType:输出的文件类型，type：输出的数据类型，bookSST: 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性const wbout = XLSX.write(workbook, wopts); // 浏览器端和node共有的API,实际上node可以直接使用xlsx.writeFile来写入文件,但是浏览器没有该APIFileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }),`${title}.xlsx`); //保存文件} catch (e) {console.log(e, e.stack);}
};

三、导出方法

导出：

import { exportList } from './utils/export';// 导出
const handleExport = async () => {// exportData 为最终的导出数据, (id, query 均为请求接口的查询参数)const exportData = await getExportData({ id, query });// 调用 exportList 方法exportList('名单',['winnerId','winnerNickName','prizeName','prizeType','winTime','receiving',],exportData);
};

getExportData方法如下：

// getExportData 获取最终导出数据
const getExportData = async ({ id, query }) => {let recordsData: any = [];const length = 0;const pageNum = 1;// recordsData 是递归调用接口后获取到的所有数据recordsData = await getDatas(id, length, pageNum, query, recordsData);const exportData = recordsData?.map((item: any) => {// 此处对返回的数据做额外的处理);return item;});return exportData;
};

getDatas 方法 (递归调用接口)：

// 递归调用接口
const getDatas = async (id: number,length: number,pageNum: number,query: any,recordsData: any
): Promise<any> => {const params = {query: {activityId: id,...query,pageNum,pageSize: 50,  // 一次请求50条数据},};const res: any = await getWinList(params); // 请求接口// records 为每次请求到的数据, total 为所有数据总条数const { records, total } = res;  length += records.length;pageNum += 1;recordsData = recordsData.concat(records);if (length >= total) { // 递归终止条件return recordsData;}return getDatas(id, length, pageNum, query, recordsData);
};

react 前端分页查询数据导出excel相关推荐

摘抄:java查询数据导出excel并返回给浏览器下载
maven地址为: <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml ...
SpringBoot后端+Vue之AntDesignVue前端实现查询表格导出excel功能
用的是阿里的com.alibaba.excel包,pom的依赖如下 <dependency><groupId>com.alibaba</groupId><ar ...
『解疑』前端通过json数据导出excel表格文件（支持多级表头、复杂表头）（json转excel）
问题如何友好的通过规范的json数据导出成excel文件. 解题制定规范的json数据结构: ( 只要将现有的数据处理成以下格式即可导出 ) {headerList: [ // 多级表头(2选1即 ...
ASP将查询数据导出EXCEL
一.用OWC 什么是OWC? OWC是Office Web Compent的缩写,即Microsoft的Office Web组件,它为在Web中绘制图形提供了灵活的同时也是最基本的机制.在一个int ...
java查询数据导出excel并返回给浏览器下载
效果图: 1.点击导出表按钮 2.接着就会出现下图 3.点击上图中的确定按钮再接着就会出现下图 4.点击上图中的保存按钮接着就会出现下图,浏览器下载完成后的提示 5.打开下载好的文件如下图好了,废话 ...
java中将查询数据导出_如何在R中将数据框导出到Excel
java中将查询数据导出 What if I tell, that you can export data frames to excel in R within a couple of minute ...
大数据分页查询 or 导出慢sql治理
大数据分页查询 or 导出慢sql治理背景缺陷要求优化方案适用场景方案优点方案缺点时间拆分如处理分页查询问题方案说明使用说明分页查询工具时间拆分工具背景当前日增数据量将近 ...
【前端html页面数据导出为pdf文件】
[前端html页面数据导出为pdf文件] 文前白话在网页端导出 Excel 数据表格保存本地前端html页面数据导出为pdf文件文前白话项目需要,将网页端查询的数据结果与数据分析结果导出文件, ...
大量数据导出Excel方案
序最近可能会遇到大量数据导出Excel的场景,今天趁现在需求告一段落来做下技术预研,然后这里就顺便分享给大家. 一.数据量预判因为我们是做物联网的,这里要导出的数据就是设备的上报数据.客户说要这些 ...

react 前端分页查询数据导出excel

react 前端分页查询数据导出excel

前言

一、安装file-saver、xlsx插件

二、创建export.ts文件

三、导出方法

react 前端分页查询数据导出excel相关推荐

最新文章

热门文章