npm install xlsx
import * as XLSX from 'xlsx';
/**
* 导出到Excel
* @param data - 用于导出的表头为属性的数组 例如:[{姓名: "123", 住址: "456"}]
* @param fileName - 导出文件命名
* @param sheetName - 指定sheet
*/
export default (data: any[], fileName = 'fileName.xlsx', sheetName = 'sheet1') => {
const jsonWorkSheet = XLSX.utils.json_to_sheet(data);
const workBook = {
SheetNames: [sheetName], // 指定有序 sheet 的 name
Sheets: {
[sheetName]: jsonWorkSheet // 表格数据内容
}
};
return XLSX.writeFile(workBook, fileName); // 向文件系统写出文件
};
import Export2Excel from '@/utils/Export2Excel';
const tableData = reactive<TableType[]>([]);
const tableColumns: DataTableColumns<TableType> = [
{
title: '姓名',
key: 'name'
},
{
title: '住址',
key: 'address'
}
]
function exportExcel(){
// 将tableColumns转化为 { name:'姓名', address: '住址' }
const excelKeyToName: { [x: string]: string } = {};
tableColumns.forEach(v => {
excelKeyToName[v.key] = v.title;
});
// 将tableData转化为 [{ '姓名': '123', '住址': '456' }]
const data = tableData.map(item => {
const newItem: { [x: string]: string | { pageindex: number; pagesize: number } | undefined } = {};
Object.keys(item).forEach(key => {
if (excelKeyToName[key]) {
newItem[excelKeyToName[key]] = item[key as keyof TableType];
}
});
return newItem;
});
// 使用导出的方法
Export2Excel(data, '导出.xlsx');
}
参考滑动验证页面