vue3表格按需导出excel

效果图展示

不要英文字段 excel内容展示

隐藏英文字段

首先安装xlsx依赖

npm install xlsx --save
// "export ‘default’ (imported as ‘XLSX’) was not found in ‘xlsx’
//当出现类似这样的报错，你可以试一下这个
npm install xlsx@0.16.0 --save

项目中引入

import XLSX from "xlsx";

项目中实现

1、在项目util.ts 文件 封装一下方法

import XLSX from "xlsx";
/*
    * @description:
    * @param {Object} json 服务端发过来的数据
    * @param {String} name 导出Excel文件名字
		* @param titleObj 一个存放标题的字段（请根据展示顺序编写写） 格式如下  
			titleObj={
				云飒ID:'ysId',
				中文名称：字段名
			}
    * @param {String} sheetName 导出sheetName名字
*/
export function exportExcel(json: any, name: string, titleObj: any, sheetName: string) {
	// 获取 所需要的中英文字段名
	let filterTitle: any = getObjVal(titleObj, "value"); // 英文字段
	let titleArr: any = getObjVal(titleObj, "key"); // 中文字段

	let data = []; // 最终存放的数据
	let tempData: any[] = []; // 筛选出的乱序数据
	let sortData = [] as any; // 排序后的数据
	// 筛选出符合条件的服务端数据
	for (const key1 in json) {
		if (json.hasOwnProperty(key1)) {
			const element = json[key1];
			let rowArr = [];
			for (const key2 in element) {
				if (element.hasOwnProperty(key2) && filterTitle.includes(key2)) {
					rowArr.push({
						label: key2,
						value: element[key2]
					});
				}
			}
			tempData.push(rowArr);
		}
	}
	// 对符合条件数据 按照titleObj 进行排序
	tempData.map((item: any) => {
		let arr = [] as any;
		filterTitle.map((item1: any) => {
			item.map((item2: any) => {
				if (item1 === item2.label) {
					arr.push(item2.value);
				}
			});
		});
		sortData.push(arr);
	});

	// //  隐藏英文字段 数据组装
	// data = [filterTitle, titleArr, ...sortData];
	// console.log("data", data);
	// const ws = XLSX.utils.aoa_to_sheet(data);
	// const wb = XLSX.utils.book_new();
	// 此处隐藏英文字段表头
	// let wsrows = [{ hidden: true }];
	// ws["!rows"] = wsrows; // ws - worksheet
	// XLSX.utils.book_append_sheet(wb, ws, sheetName);
	/* generate file and send to client */
	// XLSX.writeFile(wb, name + ".xlsx");


	// 不要英文字段
	// 数据组装
	data = [titleArr, ...sortData];
	console.log("data", data);
	const ws = XLSX.utils.aoa_to_sheet(data);
	const wb = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(wb, ws, sheetName);
	XLSX.writeFile(wb, name + ".xlsx");
}

/*
    * @description: 分别获取对象的键 或 值
    * @param {titleObj}  原始对象
		* @flag 标记  key 取键  value 取值 

*/
export function getObjVal(titleObj: any, flag: string) {
	let arr = [];
	// key 取key值
	if (flag == "key") {
		for (const key in titleObj) {
			if (titleObj.hasOwnProperty(key)) {
				arr.push(key);
			}
		}
		return arr;
	}
	// value 取value 值
	if (flag == "value") {
		for (const key in titleObj) {
			if (titleObj.hasOwnProperty(key)) {
				arr.push(titleObj[key]);
			}
		}
		return arr;
	}
}

3、页面中使用

<div style="margin-top: 18px">
	对已选 {{ tableTotal }} 条数据，进行批量操作：<span style="color: #274bef; cursor: pointer" @click="downloadFile"
		>导出</span
	>
</div>

import { exportExcel } from "@/utils/util";
const downloadFile = () => {
	downloadTable.value.map((item: any) => {
		item.proxyType = filterProxyType(item.proxyType);
		item.userCompanyId = item.userCompanyId ? "组织内成员" : "组织外成员";
		item.enableScale = item.enableScale == -1 ? "停用" : "启用";
	});

	const titleObj = {
		云飒ID: "ysId",
		代理身份: "proxyType",
		成员身份: "userCompanyId",
		工号: "jobNumber",
		所属部门: "departmentName",
		昵称: "nickname",
		真实姓名: "name",
		手机号码: "userPhone",
		账号状态: "enableScale",
		优惠码: "cdk",
		优惠价格: "preferentialPrice"
	};
	exportExcel(downloadTable.value, agentStore()?.agentObj?.name, titleObj, "组织架构内");
};