JS实现前端导出Excel表格数据_javascript技巧-js教程-PHP中文网

JS实现前端导出Excel表格数据_javascript技巧

幻影之瞳

发布： 2025-11-05 23:05:02

原创

621人浏览过

前端导出Excel可通过JS实现，常用方法有：①原生JS生成CSV文件，利用Blob和a标签下载，适合简单数据；②使用SheetJS库导出xlsx格式，支持复杂格式和多工作表；③将HTML表格直接转为Excel文件，适用于已有table元素的场景。

js实现前端导出excel表格数据_javascript技巧

前端导出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免费学习笔记（深入）”；

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

优点：

支持XLS、XLSX、CSV等多种格式
可设置样式、多工作表、公式等
浏览器和Node环境都可用

引入方式（可通过npm或CDN）：

<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文件则一般无此问题。

以上就是JS实现前端导出Excel表格数据_javascript技巧的详细内容，更多请关注php中文网其它相关文章！