HTML 的tabel导出excel最终版本「JS」

1. 概述

随着Web应用程序的普及，表格成为了一个重要的数据展示方式。尤其是企业内部系统，表格更是无处不在。表格中的数据一般都需要导出到Excel中进行存档或者其他用途。但是，HTML中的表格无法直接导出到Excel，需要通过JavaScript的帮助来实现。本文将详细介绍如何使用JavaScript实现HTML表格的导出到Excel功能。

2. HTML 编写

在HTML中，我们需要编写一个表格，让它包含数据，以方便进行导出。下面是一个示例的HTML代码：

<table id="tableID" border="1">
   <thead>
      <tr>
         <th>姓名</th>
         <th>年龄</th>
         <th>性别</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>张三</td>
         <td>20</td>
         <td>男</td>
      </tr>
      <tr>
         <td>李四</td>
         <td>22</td>
         <td>女</td>
      </tr>
   </tbody>
</table>

可以看到，该表格包括一个表头和两行数据，其中表头和每一行数据都有三列，分别是姓名、年龄和性别。每一行的数据都有不同的值。

3. JavaScript 实现

为了实现将表格导出到Excel中，我们可以使用JavaScript，下面是该功能的代码：

function exportTableToExcel(tableID, filename = ''){
    let downloadLink;
    const dataType = 'application/vnd.ms-excel';
    const tableSelect = document.getElementById(tableID);//获取要导出的表格
    const tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');//将表格的HTML格式转换为字符串
    //添加下载链接
    downloadLink = document.createElement('a');
    document.body.appendChild(downloadLink);
    if(filename){
        //如果指定了文件名，则将其添加到链接中
        downloadLink.setAttribute('download', filename + '.xls');
    }
    //将下载链接的href设置为表格的HTML内容
    //由于IE11并不支持使用url的blob连接进行下载，因此使用根据用户代理进行特定处理的navigator.msSaveOrOpenBlob函数
    if(navigator.msSaveOrOpenBlob){
        const blob = new Blob([tableHTML], {type: dataType});
        navigator.msSaveOrOpenBlob(blob, filename + '.xls');
    }else{
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
        //设置下载链接的样式以及文本
        downloadLink.download = filename + '.xls';
        downloadLink.click();
    }
}

该函数的功能是将指定的表格导出到Excel中，使用超文本链接的形式下载并保存。该函数包括以下几个步骤：

- 获取需要导出的表格，并将其转换为字符串格式（tableHTML）。

- 使用 createElement() 方法创建一个 a 标签，并将其添加到文档中。

- 如果指定了文件名，则将其作为下载链接的名称进行设置，否则使用默认名称。

- 如果浏览器支持使用 blob 进行下载，则创建 blob，并使用 navigator.msSaveOrOpenBlob() 方法进行下载。否则，将数据（tableHTML）转换为超文本链接并进行下载。

我们使用以下代码来触发该函数，

let table = document.querySelector('#tableID');
exportTableToExcel(table.id);

最终的效果是将我们所要导出的表格内容以 xls 的形式保存至本地。

4. 总结

本文介绍了如何使用JavaScript将HTML表格导出到Excel中。具体而言，我们首先编写HTML表格以提供导出的数据，然后使用JavaScript将该表格数据转换为xls格式并下载。使用JavaScript导出HTML表格到Excel中简单而又方便。在功能的具体实现上，我们需要从HTML文件中获取要导出的表格，并将其转换为字符串格式，然后创建超文本链接并进行下载。