前端导出Excel可通过JS实现，常用方法有：①原生JS生成CSV文件，利用Blob和a标签下载，适合简单数据；②使用SheetJS库导出xlsx格式，支持复杂格式和多工作表；③将HTML表格直接转为Excel文件，适用于已有table元素的场景。
前端导出Excel表格数据是日常开发中常见的需求，比如导出用户列表、订单信息等。使用JavaScript可以在不依赖后端的情况下，快速实现将表格或数组数据导出为Excel文件。下面介绍几种实用的JS方法。
使用原生JS结合Blob和a标签导出CSV
CSV是一种轻量级的表格格式，可以用Excel直接打开。通过拼接字符串生成CSV内容，再利用Blob和下载链接实现导出。
步骤如下：
- 准备数据，通常是二维数组或对象数组
- 将数据按行和列拼接成逗号分隔的字符串
- 创建Blob对象，类型设为text/csv
- 创建临时a标签，触发下载
function exportToCsv(data, filename) {
const csv = data.map(row =>
Object.values(row).map(value => `"${value}"`).join(',')
).join('\n');
const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// 使用示例
const tableData = [
{ name: '张三', age: 25, city: '北京' },
{ name: '李四', age: 30, city: '上海' }
];
exportToCsv(tableData, '用户列表.csv');
使用SheetJS（xlsx.js）库导出真正的Excel文件
如果需要导出.xlsx格式，推荐使用SheetJS，功能强大且兼容性好。
立即学习“Java免费学习笔记（深入）”；
优点：
- 支持XLS、XLSX、CSV等多种格式
- 可设置样式、多工作表、公式等
- 浏览器和Node环境都可用
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>导出代码示例：
function exportToExcel(data, filename) {
const worksheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '数据表');
// 导出为xlsx文件
XLSX.writeFile(workbook, filename);
}
// 调用
exportToExcel(tableData, '用户列表.xlsx');
从HTML表格导出Excel
若页面已有table元素，可以直接将其转为Excel文件。
function exportTableToExcel(tableId, filename) {
const table = document.getElementById(tableId);
const workbook = XLSX.utils.table_to_book(table, { sheet: "Sheet1" });
XLSX.writeFile(workbook, filename);
}
只需传入表格的id即可，适合报表类页面。
基本上就这些常用方法。对于简单场景，CSV方式足够用；需要复杂格式时，SheetJS更合适。注意处理中文乱码可在CSV前加\uFEFF，Excel文件则一般无此问题。
