怎样用JavaScript实现Excel导出？

在前端开发中，将页面内的数据导出为Excel文件是常见需求，不需要依赖后端接口，仅用JavaScript就能实现该功能，下面介绍两种常用的实现方式。

方案一：使用SheetJS库实现

SheetJS是目前前端领域最常用的Excel处理库，支持读取和导出多种表格格式，兼容性好，使用简单。

1. 引入SheetJS库

可以通过CDN引入，也可以下载到本地引入，CDN引入方式如下：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

2. 准备导出数据

首先需要准备好要导出的数据，通常是二维数组或者对象数组，这里以对象数组为例：

// 准备导出数据
const exportData = [
  { 姓名: '张三', 年龄: 25, 部门: '技术部' },
  { 姓名: '李四', 年龄: 28, 部门: '产品部' },
  { 姓名: '王五', 年龄: 26, 部门: '设计部' }
];

3. 生成Excel并触发下载

通过SheetJS的API将数据转换为工作表，再生成工作簿并触发下载：

function exportExcelBySheetJS(data, fileName) {
  // 将数据转换为工作表
  const worksheet = XLSX.utils.json_to_sheet(data);
  // 创建工作簿
  const workbook = XLSX.utils.book_new();
  // 将工作表添加到工作簿，设置工作表名称为Sheet1
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 生成Excel文件并触发下载
  XLSX.writeFile(workbook, fileName || '导出数据.xlsx');
}

// 调用导出函数
exportExcelBySheetJS(exportData, '员工信息表.xlsx');

方案二：原生JavaScript生成CSV格式文件

如果不需要复杂的Excel格式，只需要导出纯数据，可以用原生JavaScript生成CSV格式文件，CSV文件可以被Excel直接打开，实现成本更低。

1. 数据转换为CSV字符串

CSV格式是用逗号分隔不同列，换行分隔不同行的文本格式，首先需要将数据转换为CSV字符串：

function dataToCSV(data) {
  if (data.length === 0) return '';
  // 获取表头，即对象的键名
  const headers = Object.keys(data[0]);
  // 拼接表头行
  let csvContent = headers.join(',') + '\n';
  // 拼接数据行
  data.forEach(item => {
    const row = headers.map(header => item[header]);
    csvContent += row.join(',') + '\n';
  });
  return csvContent;
}

2. 触发文件下载

将CSV字符串转换为Blob对象，通过创建a标签触发下载：

function exportCSVByNative(data, fileName) {
  const csvContent = dataToCSV(data);
  // 创建Blob对象，指定类型为CSV
  const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
  // 创建下载链接
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  link.setAttribute('href', url);
  link.setAttribute('download', fileName || '导出数据.csv');
  // 模拟点击触发下载
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
}

// 调用导出函数
exportCSVByNative(exportData, '员工信息表.csv');

两种方案对比

可以通过下面的表格对比两种方案的差异，选择适合自己需求的方式：

注意事项

• 导出数据量过大时，建议做分页或者后端导出，避免前端处理超时或卡顿
• 如果数据中包含逗号、换行符等特殊字符，需要进行转义处理，避免CSV格式错乱
• SheetJS的社区版可以满足大部分基础需求，若有高级格式需求可以考虑使用专业版

JavaScriptExcel导出前端数据处理文件下载修改时间：2026-06-03 00:27:11