博客

jQuery table2excel 插件

  • Post category:jquery

jQuery table2excel 是一款用于将HTML表格导出为Excel文件的jQuery插件。下面是使用jQuery table2excel插件的完整攻略：

安装

  1. 从https://github.com/rainabba/jquery-table2excel/releases下载jQuery table2excel插件。

  2. 将jquery.table2excel.js文件拷贝到你的项目中。

  3. 在html文件中导入jQuery和jquery.table2excel.js插件。

“`html




jQuery table2excel插件示例





“`

使用

1. 导出整个表格

在HTML页面中，我们使用以下格式将表格元素选择出来，并添加’exportButton’按钮。

“`html

姓名 年龄 性别
张三 20 男
李四 22 女
王五 21 男

“`

然后在JavaScript中，通过给’exportButton’添加click事件监听器并调用’.table2excel()’方法，即可将该表格导出为Excel文件。

$('button').click(function(){
  $('#table').table2excel({
    exclude: ".noExport", // 不包括noExport类的表格行
    name: "Excel Document Name",
    filename: "myExcel.xlsx" // 设置导出的Excel文件名
  });
});

2. 只导出表格的一部分

我们可以在导出Excel文件之前，使用jQuery选择器从表格中过滤掉不需要导出的行或列。

例如，假设我们只想导出表格中性别为“男”的行，那么我们可以使用以下代码：

$('button').click(function(){
  $('#table tbody tr').filter(function(){
    return $('td', this).eq(2).text() !== '男';
  }).remove(); // 将不需要导出的行从表格中删除

  $('#table').table2excel({
    exclude: ".noExport", // 不包括noExport类的表格行
    name: "Excel Document Name",
    filename: "myExcel.xlsx" // 设置导出的Excel文件名
  });
});

示例说明

我们在分别导出以下两个表格：“学生成绩表”和“各省人口数据”。

学生成绩表：

<button id="exportButton">导出为Excel</button>
<table id="scoreTable">
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>李磊</td>
      <td>78</td>
      <td>85</td>
      <td>90</td>
    </tr>
    <tr>
      <td>002</td>
      <td>张华</td>
      <td>83</td>
      <td>76</td>
      <td>88</td>
    </tr>
    <tr>
      <td>003</td>
      <td>王二</td>
      <td>67</td>
      <td>92</td>
      <td>80</td>
    </tr>
  </tbody>
</table>

$('button').click(function(){
  $('#scoreTable').table2excel({
    exclude: ".noExport", // 不包括noExport类的表格行
    name: "学生成绩表",
    filename: "scoreTable.xlsx" // 设置导出的Excel文件名
  });
});

各省人口数据：

<button id="exportButton">导出为Excel</button>
<table id="provinceTable">
  <thead>
    <tr>
      <th>省份</th>
      <th>总人口</th>
      <th>男性人口</th>
      <th>女性人口</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>广东省</td>
      <td>113460000</td>
      <td>57970000</td>
      <td>55490000</td>
    </tr>
    <tr>
      <td>山东省</td>
      <td>100070000</td>
      <td>51570000</td>
      <td>48530000</td>
    </tr>
    <tr>
      <td>河南省</td>
      <td>94020000</td>
      <td>46730000</td>
      <td>47290000</td>
    </tr>
  </tbody>
</table>

$('button').click(function(){
  $('#provinceTable').table2excel({
    exclude: ".noExport", // 不包括noExport类的表格行
    name: "各省人口数据",
    filename: "provinceTable.xlsx" // 设置导出的Excel文件名
  });
});

以上两个例子都使用了相同的导出代码。

Tags: