当前位置：首页 > 前端开发 > 正文

html如何导出一个表格

admin
前端开发
2025-06-14
3098

使用JavaScript将HTML表格数据转换为CSV或Excel格式，通过创建Blob对象和下载链接实现导出，也可用库如SheetJS处理复杂表格，或后端生成文件。

纯前端导出方案（推荐）

方案1：使用SheetJS (xlsx.js)

<!-- 引入SheetJS库 -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<button onclick="exportExcel()">导出Excel</button>
<table id="dataTable">
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>28</td></tr>
</table>
<script>
function exportExcel() {
  const table = document.getElementById("dataTable");
  const wb = XLSX.utils.table_to_book(table, {sheet: "数据表"});
  XLSX.writeFile(wb, "网站数据报表.xlsx");
}
</script>

优势：

零后端依赖，3秒完成导出
支持复杂格式（合并单元格/样式）
输出标准Excel文件（.xlsx）

适用场景：

静态数据展示页
中小型数据量（<10万行）
需保留原始样式的报表

方案2：CSV导出（轻量级方案）

function exportCSV() {
  const rows = document.querySelectorAll("#dataTable tr");
  let csvContent = "";
  rows.forEach(row => {
    const cols = row.querySelectorAll("td, th");
    const rowData = Array.from(cols).map(cell => 
      `"${cell.innerText.replace(/"/g, '""')}"`  // 处理双引号转义
    ).join(",");
    csvContent += rowData + "rn";
  });
  const blob = new Blob(["uFEFF" + csvContent], {type: "text/csv;charset=utf-8"});
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = "网站数据.csv";
  link.click();
}

优势：

代码量少（<1KB）
兼容所有现代浏览器
支持文本编辑器直接查看

局限：

html如何导出一个表格第1张

无格式/样式支持
超大数据量可能卡顿

服务端辅助导出方案

场景：百万级数据导出

<?php
// 服务器端示例（PHP）
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="大数据报表.xlsx"');
// 从数据库分页读取数据流式写入
$stmt = $pdo->query("SELECT * FROM big_table");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  echo implode(",", $row) . "n";
  ob_flush(); // 实时刷新输出缓冲区
  flush();
}
?>

核心优化点：