博客

JS调用页面表格导出excel示例代码

  • Post category:Python

下面为您详细讲解“JS调用页面表格导出excel示例代码”的完整实例教程。

准备工作

首先，在HTML页面头部引入xlsx.min.js文件，该文件需提前下载并放置在合适的位置，可以直接通过腾讯云的jsdelivr进行下载：

<script src="xlsx.min.js"></script>

实现过程

1. 确定需要导出的表格

首先，我们需要确定需要导出的表格，可以是一个固定的表格，也可以是通过JS动态生成的表格。这里以一个固定的表格为例，该表格包括表头和数据内容。

<table id="exampleTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>john.doe@example.com</td>
      <td>123 Main St.</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>25</td>
      <td>jane.doe@example.com</td>
      <td>456 Broadway</td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td>40</td>
      <td>bob.smith@example.com</td>
      <td>789 5th Ave.</td>
    </tr>
  </tbody>
</table>

2. 定义导出数据的处理函数

接下来，我们需要定义一个函数，该函数用于获取需要导出的数据，并进行处理以符合导出的要求。这里的处理方式是将表格数据转换成JSON格式，并以数组的形式存储。函数代码如下：

function getData() {
  var table = document.getElementById("exampleTable");
  var data = [];
  var headers = [];
  for (var i = 0; i < table.rows[0].cells.length; i++) {
    headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
  }
  for (var i = 1; i < table.rows.length; i++) {
    var tableRow = table.rows[i];
    var rowData = {};
    for (var j = 0; j < tableRow.cells.length; j++) {
      rowData[headers[j]] = tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

代码解释：
– var table = document.getElementById("exampleTable"): 获取表格对应的DOM元素
– var headers = []: 存储表头
– for (var i = 0; i < table.rows[0].cells.length; i++) {...}：遍历第一行表头的每一列，获取表头名称，存储在headers数组中
– for (var i = 1; i < table.rows.length; i++) {...}：遍历数据行，将每行数据存储在JSON格式的变量rowData中，再将该变量存储在data数组中
– return data;：返回存储数据的数组

3. 调用xlsx.js生成workbook

接下来，我们需要使用xlsx.js库，将处理后的JSON数据存储到Workbook（即Excel文件）中。

function generateWorkbook(data) {
  var workbook = XLSX.utils.book_new();
  var sheet = XLSX.utils.json_to_sheet(data);
  XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
  return workbook;
}

代码解释：
– var workbook = XLSX.utils.book_new();：创建Workbook对象
– var sheet = XLSX.utils.json_to_sheet(data);：将数组转换为Worksheet（即工作表）
– XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");：将Worksheet添加到Workbook中，并指定工作表名称
– return workbook;：返回Workbook对象

4. 添加下载链接

最后一步，我们需要将生成的Workbook以文件的形式下载到本地，为此需要添加用于下载的链接。代码如下：

function downloadWorkbook(workbook) {
  var sheetName = "example.xlsx"; // 文件名
  var blob = new Blob([XLSX.write(workbook, {bookType:'xlsx', type: 'binary'})], {type: "application/octet-stream"});
  if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(blob, sheetName);
  } else {
    var element = document.createElement('a');
    var url = URL.createObjectURL(blob);
    element.href = url;
    element.download = sheetName;
    document.body.appendChild(element);
    element.click();
    setTimeout(function() {
      document.body.removeChild(element);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}

代码解释：
– var sheetName = "example.xlsx";：定义文件名
– var blob = new Blob([XLSX.write(workbook, {bookType:'xlsx', type: 'binary'})], {type: "application/octet-stream"});：将Workbook对象转换为Blob对象，即文件对象
– navigator.msSaveOrOpenBlob(blob, sheetName);：MS浏览器下载文件
– var element = document.createElement('a');：创建下载链接
– element.href = url; element.download = sheetName;：将文件对象和文件名分别赋值给下载链接的href和download属性
– document.body.appendChild(element); element.click();：添加下载链接并模拟点击触发下载
– setTimeout(function() {...}, 0);：下载完毕后删除下载链接和释放资源

5. 完整示例代码

最后，我们将上述步骤整合成示例代码，以便更好地了解导出Excel文件的过程。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS调用页面表格导出excel示例代码</title>
  <script src="xlsx.min.js"></script>
</head>
<body>
  <table id="exampleTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>john.doe@example.com</td>
        <td>123 Main St.</td>
      </tr>
      <tr>
        <td>Jane Doe</td>
        <td>25</td>
        <td>jane.doe@example.com</td>
        <td>456 Broadway</td>
      </tr>
      <tr>
        <td>Bob Smith</td>
        <td>40</td>
        <td>bob.smith@example.com</td>
        <td>789 5th Ave.</td>
      </tr>
    </tbody>
  </table>
  <button onclick="exportExcel()">导出 Excel</button>
  <script>
    function getData() {
      var table = document.getElementById("exampleTable");
      var data = [];
      var headers = [];
      for (var i = 0; i < table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
      }
      for (var i = 1; i < table.rows.length; i++) {
        var tableRow = table.rows[i];
        var rowData = {};
        for (var j = 0; j < tableRow.cells.length; j++) {
          rowData[headers[j]] = tableRow.cells[j].innerHTML;
        }
        data.push(rowData);
      }
      return data;
    }
    function generateWorkbook(data) {
      var workbook = XLSX.utils.book_new();
      var sheet = XLSX.utils.json_to_sheet(data);
      XLSX.utils.book_append_sheet(workbook, sheet, "Sheet1");
      return workbook;
    }
    function downloadWorkbook(workbook) {
      var sheetName = "example.xlsx";
      var blob = new Blob([XLSX.write(workbook, {bookType:'xlsx', type: 'binary'})], {type: "application/octet-stream"});
      if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, sheetName);
      } else {
        var element = document.createElement('a');
        var url = URL.createObjectURL(blob);
        element.href = url;
        element.download = sheetName;
        document.body.appendChild(element);
        element.click();
        setTimeout(function() {
          document.body.removeChild(element);
          window.URL.revokeObjectURL(url);
        }, 0);
      }
    }
    function exportExcel() {
      var data = getData();
      var workbook = generateWorkbook(data);
      downloadWorkbook(workbook);
    }
  </script>
</body>
</html>

在上述示例代码中，我们通过调用exportExcel()函数来触发导出Excel文件的动作。点击页面上的“导出 Excel”按钮后，即可选择下载文件的存储路径和文件名，并完成导出操作。

小结

通过上述的实例教程，我们可以了解到通过JS调用页面表格导出Excel文件的完整过程，主要包括以下步骤：

  1. 确定需要导出的表格；
  2. 定义导出数据的处理函数，以符合导出要求；
  3. 使用xlsx.js将JSON数据转换为Workbook对象；
  4. 添加用于下载的链接；
  5. 整合以上步骤，完成实现，实现导出 Excel 文件。

通过读者可以按需实现excel文件的导出，提高数据分析效率。

Tags: ,