jQuery如何将网页数据保存为Excel？-网页设计-锦华智联科技

核心概念

无论使用哪种库,基本流程都类似：

（图片来源网络，侵删）

定位数据：使用 jQuery 选择器 ($('#table'), $('.data-row') 等) 找到网页中你想要导出的数据元素。
构建表格：将获取到的数据组织成一个 HTML 表格 (<table>) 的字符串，这是最关键的一步，因为 Excel 对解析 HTML 表格有很好的原生支持。
触发下载：创建一个隐藏的 <a> 链接，将构建好的 HTML 表格字符串作为其 href 属性（使用 data: URI 方案），然后模拟点击这个链接，浏览器就会自动下载文件。

使用 `table2excel` 插件 (最简单，适合初学者)

这是一个专门为 jQuery 设计的轻量级插件，使用起来非常方便。

引入文件

在你的 HTML 页面中引入 jQuery 和 table2excel 插件的 JS 文件。

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 table2excel 插件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery-table2excel@1.1.0/dist/jquery.table2excel.min.js"></script>

准备 HTML 数据

假设你的数据在一个 <table> 中。

<button id="exportBtn">导出为 Excel</button>
<table id="myTable" border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

编写 jQuery 代码

给按钮绑定点击事件,调用插件方法。

（图片来源网络，侵删）

$(document).ready(function() {
  $("#exportBtn").on("click", function() {
    $("#myTable").table2excel({
      // 不导出的列的 class 名
      exclude: ".excludeMe",
      // 文件名
      name: "ExcelDocument",
      // 文件后缀
      filename: "myExcel", //不含后缀
      // 表格工作表名
      sheet: {
        name: "Sheet1"
      },
      // 是否排除图片
      exclude_img: true,
      // 是否排除超链接
      exclude_links: true,
      // 是否排除样式
      exclude_inputs: true
    });
  });
});

优点：

极其简单：几行代码就能实现功能。
无需后端：纯前端解决方案。

缺点：

依赖插件：需要额外引入一个库。
功能有限：对于复杂的表格样式、合并单元格等支持不佳。
兼容性问题：在较新版本的 Excel 或某些特定环境下可能出现样式错乱。

使用 `SheetJS (xlsx)` 库 (功能最强大，推荐)

SheetJS 是目前最流行、功能最全的前端处理 Excel 的库，它支持几乎所有 Excel 格式（如 .xlsx, .xls, .csv），并且能很好地处理样式、公式、图片等。

引入文件

从 CDN 引入 SheetJS 的库文件。

（图片来源网络，侵删）

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 SheetJS 库 -->
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

准备 HTML 数据

与方法一相同,我们使用上面的 #myTable。

编写 jQuery 代码

这是核心部分,我们将手动构建一个工作簿并导出。

$(document).ready(function() {
  $("#exportBtn").on("click", function() {
    // 1. 找到目标表格
    var table = $("#myTable")[0]; // 获取原生 DOM 元素
    // 2. 使用 SheetJS 的 table_to_book 方法将表格转换为工作簿对象
    // 2.1 'A1' 表示从哪个单元格开始读取数据
    // 2.2 { sheet: "SheetJS" } 指定工作表的名称
    var workbook = XLSX.utils.table_to_book(table, {sheet: "员工信息"});
    // 3. 生成 Excel 文件并触发下载
    // 3.1 get_file_name() 是一个自定义函数，用于生成文件名，你也可以直接写死字符串
    // 3.2 XLSX.writeFile(workbook, filename) 会自动创建一个下载链接
    XLSX.writeFile(workbook, '员工数据.xlsx');
  });
});

优点：

功能强大：支持 .xlsx, .xls, .csv 等多种格式，可处理复杂样式和大数据量。
社区活跃：文档完善，遇到问题容易找到解决方案。
不依赖 jQuery：虽然我们用 jQuery 来操作 DOM，但 SheetJS 本身是独立的，可以和任何 JS 框架结合。

缺点：

库体积较大：相比于 table2excel，SheetJS 的库文件要大得多。
代码稍复杂：需要理解工作簿、工作表等基本概念。

纯前端手动实现 (无依赖，轻量级)

如果你不想引入任何第三方库,可以自己动手实现一个简单的 CSV 或 HTML 导出。

准备 HTML 数据

与方法一相同。

编写 jQuery 代码

$(document).ready(function() {
  $("#exportBtn").on("click", function() {
    // 选择要导出的表格
    var $table = $('#myTable');
    // 创建一个临时的 a 标签用于下载
    var a = document.createElement('a');
    a.href = 'data:application/vnd.ms-excel;base64,';
    a.download = '数据导出.xls'; // 注意，这里我们使用 .xls 作为后缀，因为 Excel 能很好地解析内嵌的 HTML
    // 构建 HTML 表格内容
    // 1. 克隆表格，避免修改页面上的原始表格
    // 2. 移除不需要的元素，比如按钮
    var html = $table.clone().find('button').remove().end().html();
    // 添加 HTML 头和尾，使其成为一个完整的 HTML 文档
    var ctx = {
        worksheet: 'Worksheet',
        table: html
    };
    var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>';
    var b64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); };
    var url = 'data:application/vnd.ms-excel;base64,' + b64(template.replace(/\{worksheet\}/g, ctx.worksheet).replace(/\{table\}/g, ctx.table));
    // 设置 a 标签的 href 并触发点击
    a.href = url;
    a.click();
    // 释放 a 标签占用的内存
    setTimeout(function() { document.body.removeChild(a); }, 100);
  });
});

优点：

零依赖：不需要引入任何外部 JS 库。
轻量：代码量少，速度快。

缺点：

功能有限：只能导出 .xls 格式，且样式控制能力很弱。
代码可读性差：需要手动处理 Base64 编码和 HTML 模板，容易出错。

总结与如何选择

方法	优点	缺点	适用场景
`table2excel` 插件	简单易用，几行代码搞定	功能弱，依赖插件，兼容性一般	快速原型、简单表格导出、对样式要求不高的项目
`SheetJS (xlsx)` 库	功能最强大，格式全，样式支持好，社区活跃	库体积大，代码稍复杂	生产环境首选，需要处理复杂表格、大数据量、多格式导出的专业项目
纯前端手动实现	零依赖，轻量级	功能弱，格式有限（.xls），代码复杂	对项目体积要求极其苛刻，且只需要导出最简单表格的场景

我的建议是：

对于绝大多数项目,直接使用 SheetJS 是最好的选择，它的强大和稳定性能应对绝大多数业务需求。
如果你只是临时需要一个功能,或者做一个快速演示，用 table2excel 会快得多。
除非你真的无法忍受引入任何第三方库,否则不推荐自己手动实现。

jQuery如何将网页数据保存为Excel？

核心概念

使用 table2excel 插件 (最简单，适合初学者)

引入文件

准备 HTML 数据

编写 jQuery 代码

使用 SheetJS (xlsx) 库 (功能最强大，推荐)

引入文件

准备 HTML 数据

编写 jQuery 代码

纯前端手动实现 (无依赖，轻量级)

准备 HTML 数据

编写 jQuery 代码

总结与如何选择

使用 `table2excel` 插件 (最简单，适合初学者)

使用 `SheetJS (xlsx)` 库 (功能最强大，推荐)