2024年Web前端最新vue3表格按需导出excel_vue3 table导出excel(1)，2024年最新面试了几家公司都被拒绝了

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

首先安装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;
	}


### 总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以**底层逻辑，基础知识要掌握好！**

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。



这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 **HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法**等高频考点**238道（含答案）**！  

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

资料截图 ：

![](https://img-blog.csdnimg.cn/img_convert/edeaa71cbc745698bdedcfe65be40387.png)

![](https://img-blog.csdnimg.cn/img_convert/981487b285a8b90918f35c830c299df8.png)

![](https://img-blog.csdnimg.cn/img_convert/9866daffbebcf87b44d9530a59427834.png)

**高级前端工程师必备资料包**  

![](https://img-blog.csdnimg.cn/img_convert/ba803e1b69e399b6739e3d33554d42a7.png)