vue3表格数据导出excel

1.定义列名

const column = [
	{
		title: 'xx',
		key: 'xx',
	},
	{
		title: 'xx2',
		key: 'xx22',
	},
	{
		title: 'xx3',
		key: 'xx33',
	},
]

2.加工列

const generateColumns = (length: number, props?: any) =>
	Array.from({ length }).map((_, columnIndex) => ({
		...props,
		key: `${columnIndex}`,
		dataKey: `${column[columnIndex].key}`,
		title: `${column[columnIndex].title}`,
		width: 150,
	}));

3.导出

//其中sourceTableArr为表格的数据,自己替换
function exportExcel() {
	const columns = generateColumns(column.length);
//可以在此之前加工表格数据
	const res: string[][] = sourceTableArr.map((it) => {
		const arr: any = [];
		columns.forEach((column) => {
			arr.push(it[column.dataKey]);
		});
		return arr;
	});

	const titleList: string[] = [];
	columns.forEach((column) => {
		titleList.push(column.title);
	});
	res.unshift(titleList);
	const workSheet = XLSX.utils.aoa_to_sheet(res);
	const workBook = XLSX.utils.book_new();
	// 设置列宽(注意是字符)
	workSheet['!cols'] = [
	  { wch: 20 }, // 第一列宽度为20字符
	  { wch: 30 }, // 第二列宽度为30字符
	   { wch: 30 }, // 第三列宽度为30字符
	  // 依此类推，为每一列设置宽度
	];
	XLSX.utils.book_append_sheet(workBook, workSheet, 'xxx信息');
	XLSX.writeFile(workBook, '导出表名xxx.xlsx');	
}