vue3+js项目el-table导出excel表（带边框）

// 页面导出按钮方法
const exportex = () => {const loading = ElLoading.service({lock: true,text: '文件导出中...',background: 'rgba(0, 0, 0, 0.7)',});try {const exportData = tableData.value.map(item => ({...item,createdAt: item.createdAt ? new Date(item.createdAt) : null}));// 调用导出方法exportExcel(exportData,tableColumns.value.filter(col => col.show),'下载文件名','标题名');} catch (error) {ElMessage.error('导出失败，请重试');} finally {loading.close();}
}

//注意先下载依赖  npm install exceljs file-saver
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';/*** 通用Excel导出方法（带序号列和合并标题）* @param {Array} tableData 表格数据* @param {Array} columns 列配置（需包含prop/label/width）* @param {String} fileName 文件名* @param {String} type 导出类型（用于条件处理）* @param {String} sheetTitle 工作表标题（新增参数）*/
export const exportExcel = (tableData, columns, fileName, sheetTitle) => {const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('Sheet1');// 添加序号列配置到columns最前面const enhancedColumns = [{prop: 'index',label: '序号',show: true,width: '80' // 固定序号列宽度},...columns];// 设置列宽（转换单位：字符宽度 -> Excel单位）enhancedColumns.forEach((col, index) => {const width = col.width ? Number(col.width.replace('px', '')) / 8 : 15;worksheet.getColumn(index + 1).width = width; // 使用位置索引（从1开始）});// 创建标题样式（大字体+居中）const titleStyle = {font: { bold: true, size: 16 },alignment: { vertical: 'middle', horizontal: 'center' }};// 创建表头样式const headerStyle = {font: { bold: true, size: 12 },alignment: { vertical: 'middle', horizontal: 'center' },border: {top: { style: 'thin' },left: { style: 'thin' },bottom: { style: 'thin' },right: { style: 'thin' }}};// 创建内容样式const cellStyle = {alignment: { vertical: 'middle', horizontal: 'center' },border: {top: { style: 'thin' },left: { style: 'thin' },bottom: { style: 'thin' },right: { style: 'thin' }}};// 添加合并标题行（第一行）const titleRow = worksheet.addRow([sheetTitle]);titleRow.height = 30; // 设置标题行高titleRow.eachCell(cell => {cell.style = titleStyle;cell.alignment = { vertical: 'middle', horizontal: 'center' };});// 合并所有列（A1到最大列号）const lastColumn = String.fromCharCode(65 + enhancedColumns.length - 1);worksheet.mergeCells(`A1:${lastColumn}1`);// 添加表头（第二行）const headerRow = worksheet.addRow(enhancedColumns.map(col => col.label));headerRow.eachCell(cell => cell.style = headerStyle);// 添加数据行（第三行开始）tableData.forEach((rowData, rowIndex) => {const rowValues = [rowIndex + 1];enhancedColumns.slice(1).forEach(col => { // 跳过序号列let value = rowData[col.prop];//日期处理if (col.prop === 'createdAt' && value) {const date = new Date(value);if (isNaN(date)) {console.warn(`无效日期格式: ${value} (ID: ${rowData.id})`);value = '无效日期';} else {value = date.toLocaleString('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit'});}}rowValues.push(value);});const row = worksheet.addRow(rowValues);row.eachCell((cell, colNum) => {cell.style = cellStyle;});});// 自动调整列宽（可选）worksheet.columns.forEach(col => {col.width = col.width || 15;});// 生成并下载文件workbook.xlsx.writeBuffer().then(buffer => {const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });saveAs(blob, `${fileName}.xlsx`);});
};