JS实现将数据导出到Excel的方法详解

下面是“JS实现将数据导出到Excel的方法详解”的完整攻略。

一、介绍

在开发过程中，我们经常需要将数据导出到Excel，并进一步进行处理或者查看。有多种方法可以实现数据导出到Excel，其中一种常用的方法就是使用JavaScript。JavaScript可以生成表格，并将其转化为Excel文件，然后自动下载到本地。本文将分步讲解如何使用JavaScript实现数据导出到Excel的方法。

二、实现步骤

1. 创建一个表格

首先，我们需要创建一个表格，并填充数据。我们可以通过JavaScript代码来完成这个步骤。

function createTable(data) {
  // 创建table元素
  const table = document.createElement('table');

  // 创建thead元素
  const thead = document.createElement('thead');
  const headRow = document.createElement('tr');
  //添加表头数据
  for (let i = 0; i < data.header.length; i++) {
    const th = document.createElement('th');
    th.innerHTML = data.header[i];
    headRow.appendChild(th);
  }
  thead.appendChild(headRow);

  // 创建tbody元素
  const tbody = document.createElement('tbody');
  // 添加表格数据
  for (let i = 0; i < data.body.length; i++) {
    const row = document.createElement('tr');
    for (let j = 0; j < data.body[i].length; j++) {
      const cell = document.createElement('td');
      cell.innerHTML = data.body[i][j];
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
  table.appendChild(thead);
  table.appendChild(tbody);

  return table;
}

createTable函数的参数是一个对象，包含数据表的表头和数据列表。在函数内部，首先使用createElement方法创建了一个table元素，和thead、tbody元素，然后通过循环为表头和表格添加数据。最后，返回一个table元素。这个函数返回的table元素呈现为一个HTML数据表。

2. 将表格转化为Excel文件

现在我们已经创建了一个HTML数据表。接下来，我们需要将其转化为一个Excel文件。我们可以使用第三方库js-xlsx来完成这个任务。

function tableToExcel(table) {
  const workbook = XLSX.utils.book_new();

  // 将表格转化为sheet
  const sheet = XLSX.utils.table_to_sheet(table);
  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');

  // 生成 Excel文件并自动下载
  const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
  function s2ab(s) {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i < s.length; i++) {
      view[i] = s.charCodeAt(i) & 0xFF;
    }
    return buf;
  }
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
  const filename = 'data.xlsx';
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

tableToExcel函数将一个HTML数据表转化为一个Excel文件，并自动下载到本地。在函数内部，首先使用js-xlsx提供的utils.book_new函数来创建一个workbook对象。然后，使用utils.table_to_sheet函数将table元素转化为一个sheet对象，并使用utils.book_append_sheet将sheet添加到workbook中。接着，使用write函数生成二进制数据，并使用blob对象将数据下载到本地。最后，将下载链接的click事件触发，实现自动下载。

3. 调用函数导出Excel

上面两个步骤已经实现了将HTML数据表转换为一个Excel文件的功能，现在我们只需要调用这两个函数，就可以实现数据导出Excel的功能了。

const data = {
  header: ['Name', 'Gender', 'Age'],
  body: [
    ['Bob', 'Male', '25'],
    ['Alice', 'Female', '21'],
    ['John', 'Male', '32']
  ]
};

const table = createTable(data);
document.body.appendChild(table);
tableToExcel(table);

以上代码定义了一个对象data，包含表头和数据列表。然后，调用createTable函数将data转化为一个HTML数据表，并插入到页面中。最后，调用tableToExcel函数将HTML数据表转化为Excel文件并自动下载到本地。

三、示例

以下是两个示例：

示例1：美化数据表

我们可以通过CSS样式美化生成的数据表格，让其更加美观。

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #ddd;
  font-weight: bold;
  text-align: left;
}

thead tr th {
  border-bottom: 2px solid #ddd;
}

tbody tr:hover {
  background-color: #eee;
}

tbody tr:nth-child(odd) {
  background-color: #f6f6f6;
}

td, th {
  padding: 10px;
  border: 1px solid #ddd;
}

示例2：更换Excel文件名

我们可以将tableToExcel函数的filename参数修改为我们需要的Excel文件名。例如：

const filename = 'user_data.xlsx';
link.download = filename;

这将生成一个名为user_data.xlsx的Excel文件，并自动下载到本地。

四、总结

使用JS实现将数据导出到Excel可以使数据更直观、方便地查看和处理。我们使用了js-xlsx库通过JavaScript代码创建和下载一个Excel文件。实现步骤包括：创建一个数据表、将数据表转换为Excel文件、自动下载Excel文件到本地。通过引入CSS可以美化生成的数据表。通过更改filename参数，我们可以自定义Excel文件名。