vue3 导出Excel TypeScript

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');
}

参考滑动验证页面