js怎么将table转换为excel

将HTML Table转换为Excel的JavaScript方法

使用JavaScript将HTML表格转换为Excel文件的常用方法有：使用TableExport库、通过SheetJS库、手动创建Excel格式的数据、利用Blob和FileSaver。其中，使用SheetJS库是一种常见且功能强大的方法。下面将详细描述如何使用SheetJS库实现这一功能。

一、使用`SheetJS`库

SheetJS（又称xlsx）是一个强大的JavaScript库，用于处理Excel文件。它可以轻松地将HTML表格数据导出为Excel文件。

1、安装和引入`SheetJS`库

首先，需要安装SheetJS库。可以通过以下命令安装：

npm install xlsx

在HTML文件中通过CDN引入：

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

2、获取HTML表格数据

在HTML中创建一个表格：

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

3、实现导出功能

利用SheetJS库将表格数据导出为Excel文件：

<script>
  function exportTableToExcel(tableID, filename = 'table.xlsx') {
    var table = document.getElementById(tableID);
    var wb = XLSX.utils.table_to_book(table, { sheet: "Sheet JS" });
    return XLSX.writeFile(wb, filename);
  }
  document.getElementById('exportButton').addEventListener('click', function() {
    exportTableToExcel('myTable');
  });
</script>
<button id="exportButton">导出为Excel</button>

二、手动创建Excel格式的数据

虽然使用库是最简便的方法，但有时候我们需要手动创建Excel格式的数据。这需要我们了解Excel文件的结构，并生成相应的二进制数据。

1、创建Excel文件的基本结构

Excel文件实际上是一个压缩包，包含多个XML文件。我们需要手动创建这些XML文件并打包成一个ZIP文件。以下是一个基本的实现方法：

<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2/dist/FileSaver.min.js"></script>
<script>
  function tableToExcel(tableID, filename = 'table.xlsx') {
    var table = document.getElementById(tableID);
    var data = [];
    for (var i = 0; i < table.rows.length; i++) {
      var row = [];
      for (var j = 0; j < table.rows[i].cells.length; j++) {
        row.push(table.rows[i].cells[j].innerText);
      }
      data.push(row);
    }
    var zip = new JSZip();
    var content = generateExcelContent(data);
    zip.file("xl/worksheets/sheet1.xml", content);
    zip.generateAsync({ type: "blob" }).then(function(content) {
      saveAs(content, filename);
    });
  }
  function generateExcelContent(data) {
    var xmlContent = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' +
                     '<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">' +
                     '<sheetData>';
    for (var i = 0; i < data.length; i++) {
      xmlContent += '<row>';
      for (var j = 0; j < data[i].length; j++) {
        xmlContent += '<c t="inlineStr"><is><t>' + data[i][j] + '</t></is></c>';
      }
      xmlContent += '</row>';
    }
    xmlContent += '</sheetData></worksheet>';
    return xmlContent;
  }
  document.getElementById('exportButton').addEventListener('click', function() {
    tableToExcel('myTable');
  });
</script>
<button id="exportButton">导出为Excel</button>

三、利用`Blob`和`FileSaver`实现导出

Blob和FileSaver是浏览器的API，可以用于创建和下载文件。我们可以利用这些API手动生成Excel文件的二进制数据并触发下载。

1、创建Blob对象

我们可以通过以下代码创建一个Blob对象并触发下载：

<script>
  function exportTableToExcel(tableID, filename = 'table.xlsx') {
    var table = document.getElementById(tableID);
    var data = new Blob([generateExcelContent(table)], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(data);
    link.download = filename;
    link.click();
  }
  function generateExcelContent(table) {
    var xmlContent = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' +
                     '<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">' +
                     '<sheetData>';
    for (var i = 0; i < table.rows.length; i++) {
      xmlContent += '<row>';
      for (var j = 0; j < table.rows[i].cells.length; j++) {
        xmlContent += '<c t="inlineStr"><is><t>' + table.rows[i].cells[j].innerText + '</t></is></c>';
      }
      xmlContent += '</row>';
    }
    xmlContent += '</sheetData></worksheet>';
    return xmlContent;
  }
  document.getElementById('exportButton').addEventListener('click', function() {
    exportTableToExcel('myTable');
  });
</script>
<button id="exportButton">导出为Excel</button>

四、结论

在将HTML表格转换为Excel文件时，使用SheetJS库是一种非常便利且强大的方法。无论是通过库实现，还是手动创建Excel格式的数据，都是可行的解决方案。具体选择哪种方法，可以根据项目需求和技术背景进行选择。

对于开发团队而言，使用专业的项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以大大提升项目管理和协作效率。这些系统不仅支持各种数据导出功能，还提供了丰富的项目管理和协作工具，是开发团队的理想选择。