JavaScript将Table导出到Excel实现思路及代码

下面我将详细讲解JavaScript将Table导出到Excel的实现思路及代码，内容如下：

实现思路

1. 获取要导出的表格元素，并获取其中的数据。
2. 将数据转换为Excel支持的格式。
3. 创建一个Blob对象，将Excel格式的数据放入其中。
4. 创建一个下载链接，将Blob对象作为链接的数据，设置文件名为Excel文件名。
5. 自动模拟点击链接下载文件。

代码实现

function exportToExcel(tableId, filename = 'table') {
  let table = document.getElementById(tableId);  // 获取表格元素
  let tableData = [];  // 用于存储表格数据

  // 遍历表格中的每一行和每一列，将表格数据存储到tableData数组中
  for (let i = 0, row; row = table.rows[i]; i++) {
    let rowData = [];
    for (let j = 0, col; col = row.cells[j]; j++) {
      rowData.push(col.innerText);
    }
    tableData.push(rowData.join('\t'));  // 用tab分割每一列数据
  }

  // 将数据转换为Excel支持的格式
  let excelData = tableData.join('\n');

  // 创建一个Blob对象，并用URL.createObjectURL生成文件链接
  let blob = new Blob([excelData], { type: 'application/vnd.ms-excel' });
  let url = URL.createObjectURL(blob);

  // 创建一个下载链接，并自动模拟点击链接下载文件
  let a = document.createElement('a');
  a.href = url;
  a.download = `${filename}.xls`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

以上代码实现了将表格导出为Excel文件的功能，在调用该函数时，需要传递要导出的表格元素的ID以及导出的文件名。

示例一：

<!-- HTML代码 -->
<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<button onclick="exportToExcel('myTable', 'student')">导出为Excel文件</button>

点击“导出为Excel文件”按钮后，将会生成一个名为“student.xls”的Excel文件，其中包含“姓名”、“年龄”和“性别”三列数据。

示例二：

<!-- HTML代码 -->
<table id="myTable">
  <thead>
    <tr>
      <th>编号</th>
      <th>商品名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>苹果</td>
      <td>5.5</td>
      <td>10</td>
      <td>55</td>
    </tr>
    <tr>
      <td>2</td>
      <td>香蕉</td>
      <td>2.8</td>
      <td>20</td>
      <td>56</td>
    </tr>
    <tr>
      <td>3</td>
      <td>橙子</td>
      <td>3.2</td>
      <td>15</td>
      <td>48</td>
    </tr>
  </tbody>
</table>

<button onclick="exportToExcel('myTable', 'goods')">导出为Excel文件</button>

点击“导出为Excel文件”按钮后，将会生成一个名为“goods.xls”的Excel文件，其中包含“编号”、“商品名称”、“价格”、“数量”和“总价”五列数据。