前端(react/vue)实现数据导出成excel
1. 下载依赖
npm install js-export-excel -D
2. 新建exportExcel.js
import ExportJsonExcel from 'js-export-excel';
/*** @Event: 获取导出数据* @description:* @param config.tableParams<Object>: 表格接口请求参数* @param config.listKey<String>: 表格数据key，默认为 'list'* @param config.reqUrl<String>: 表格接口请求地址* @param config.fetchInit<Object>: 表格接口请求配置，默认为 {method: 'GET', headers: {'content-type': 'application/json'}}* @author: mhf* @time: 2025-04-21 10:47:20**/
export const fetchData = async (config) => {const {tableParams,listKey = 'list',reqUrl,fetchInit = {method: 'GET',headers: {'content-type': 'application/json',Authorization: localStorage.getItem('token'),},}} = config;
try {const queryParams = new URLSearchParams(tableParams).toString();const response = await fetch(`${reqUrl}?${queryParams}`, fetchInit);if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const tableRes = await response.json();return tableRes[listKey] || [];} catch (error) {console.error('Fetch data failed:', error);return [];}
};
/*** @Event: 前端文件导出* @description:* @param reqConfig<Object>: 请求配置对象* @param reqConfig.tableParams<Object>: 表格接口请求参数* @param reqConfig.listKey<String>: 表格数据key，默认为 'list'* @param reqConfig.reqUrl<String>: 表格接口请求地址* @param config<Object>: 导出配置对象* @param config.fileName<String>: 文件名* @param config.sheetFilter<Array>: 表头标题对应的key* @param config.sheetHeader<Array>: 表头名称* @author: mhf* @time: 2025-04-18 18:03:05**/
export const exportExcel = async (reqConfig, config) => {const {fileName,sheetFilter = [],sheetHeader = [],fn = arr => arr} = config;
const tableData = await fetchData(reqConfig);
if (tableData && tableData.length > 0) {const processedData = fn(tableData);
const option = {fileName,datas: [{sheetData: JSON.parse(JSON.stringify(processedData)),sheetName: fileName,sheetFilter,sheetHeader,columnWidth: new Array(sheetHeader.length).fill(20),}]};const toExcel = new ExportJsonExcel(option);toExcel.saveExcel();
return processedData; // 返回处理后的数据} else {console.warn('No data to export');return [];}
};
3. 使用
import { exportExcel } from '/src/utils/exportExcel';
const reqConfig = {tableParams: {number4page: 99999,page: 0},reqUrl: '/apis/elevator/page',}
const config = {fileName: '电梯监测表',sheetFilter: ['elevatorname', 'modeType', 'runningStateType', 'alarmtypelabel', 'workTime', 'aaa'],sheetHeader: ['编号', '运行模式', '运行状态', '报警状态', '运行时长', 'aaa'],fn: (data) => {return data.map((item) => {return {...item,runningStateType: item.runningstatetype == 1 ? '运行中' : '停止',modeType: item.modetype === 1 ? '自动' : '手动',aaa: item.elevatorname + item.elevatorcode,}})}}<div onClick={() => exportExcel(reqConfig, config)}>导出</div>
