html表格excel导出前端插件

以下是介绍两个常用的前端插件来实现HTML表格Excel导出的方法：

1. TableExport.js插件

TableExport.js是一个轻量级的jQuery插件，可以将HTML表格导出为Excel、CSV、TXT和PDF格式。使用该插件需要引入jQuery库和TableExport.js文件。

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- 引入TableExport.js文件 -->
<script src="https://cdn.bootcss.com/TableExport/5.2.0/js/tableexport.min.js"></script>

然后在需要导出的表格上添加`data-tableexport`属性，并设置导出格式和文件名：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

<button onclick="exportTable()">Export Table</button>

<script>
  function exportTable() {
    $('#myTable').tableExport({
      type: 'xlsx', // 导出Excel格式
      fileName: 'myTable', // 导出文件名
    });
  }
</script>

2. SheetJS.js插件

SheetJS.js是一个纯JavaScript库，可以将HTML表格导出为Excel、CSV和JSON格式。使用该插件需要引入SheetJS.js文件。

<!-- 引入SheetJS.js文件 -->
<script src="https://cdn.bootcss.com/xlsx/0.16.8/xlsx.full.min.js"></script>

然后在需要导出的表格上添加`id`属性：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

<button onclick="exportTable()">Export Table</button>

<script>
  function exportTable() {
    /* 获取表格数据 */
    var wb = XLSX.utils.table_to_book(document.getElementById('myTable'), {sheet:"Sheet1"});
    /* 导出Excel文件 */
    XLSX.writeFile(wb, 'myTable.xlsx');
  }
</script>