JavaScript 操作 Excel 生成报表全攻略

在开发前端应用中，我们经常需要生成一些报表来展示数据。而 Excel 作为办公领域中最流行的数据处理软件，自然成为了生成报表的热门工具之一。在本篇攻略中，我们将讲解如何使用 JavaScript 操作 Excel，生成报表并导出到本地，完全摆脱后端的帮助。

前置条件

在开始前，请确保你已经了解并具备以下知识：

JavaScript 基础语法
HTML 基础知识
Node.js 环境安装和使用

准备工作

安装 ExcelJS 库

ExcelJS 是一个支持 Node.js 和浏览器的 JavaScript 库，用于读取、创建和操作 Excel 文档。使用 npm 可以轻松安装该库。

npm install exceljs

建立 HTML 模板

为了方便，我们可以在 HTML 页面中设置一个按钮，用于触发生成报表的操作。在此之前，我们需要在页面中引入 ExcelJS 库和 jQuery 库。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 操作 Excel 生成报表全攻略</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.2.0/exceljs.min.js"></script>
</head>
<body>
  <button id="btnExport">导出 Excel 报表</button>
  <script>
    $('#btnExport').on('click', function () {
      // 生成报表的代码将在此处编写
    });
  </script>
</body>
</html>

生成报表

接下来，我们将编写生成报表的代码。为了方便示例代码的说明，我们以生成一个简单的表格报表为例。

$('#btnExport').on('click', function () {
  // 创建一个新的 Excel 工作簿
  var workbook = new ExcelJS.Workbook();

  // 添加一个工作表
  var worksheet = workbook.addWorksheet('My Sheet');

  // 添加表头
  worksheet.addRow(['名称', '数量', '单价']);

  // 添加表格数据
  worksheet.addRow(['苹果', 10, 2.5]);
  worksheet.addRow(['香蕉', 20, 1.5]);
  worksheet.addRow(['橘子', 30, 3]);

  // 导出 Excel 文件
  workbook.xlsx.writeBuffer().then(function (buffer) {
    saveAs(new Blob([buffer]), 'MyExcelReport.xlsx');
  });
});

在上述代码中，我们使用 ExcelJS 库创建了一个新的工作簿，向其中添加了一个名为 “My Sheet” 的工作表，并在该表中添加了一个表头和三行数据。最后，我们调用 workbook.xlsx.writeBuffer() 方法将该工作簿导出为一个二进制流，并通过 FileSaver.js 将其保存到本地。

示例说明

示例一：使用 AJAX 获取数据生成报表

我们可以通过 AJAX 请求获取后台数据，并在前端生成报表。

$('#btnExport').on('click', function () {
  $.get('/data', function (data) {
    var workbook = new ExcelJS.Workbook();
    var worksheet = workbook.addWorksheet('My Sheet');

    // 添加表头
    worksheet.addRow(['名称', '数量', '单价']);

    // 添加数据
    $.each(data, function (index, item) {
      worksheet.addRow([item.name, item.quantity, item.price]);
    });

    // 导出 Excel 文件
    workbook.xlsx.writeBuffer().then(function (buffer) {
      saveAs(new Blob([buffer]), 'MyExcelReport.xlsx');
    });
  });
});

在此示例中，我们使用 jQuery 的 $.get() 方法获取了后台数据，依据数据生成了 Excel 报表。如果服务器返回的数据格式正好符合生成报表的要求，我们甚至都不必手动添加表头了。

示例二：读取本地文件生成报表

ExcelJS 还支持读取本地 Excel 文件，并将其转换为 JavaScript 对象。下面是一个示例，我们使用 FileReader() 方法来读取本地文件，然后读取并转换为 JavaScript 对象并展示在控制台上：

$('#btnExport').on('click', function () {
  var input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.addEventListener('change', function () {
    if (this.files.length) {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function (event) {
        var data = event.target.result;
        var workbook = new ExcelJS.Workbook();
        workbook.xlsx.load(data).then(function () {
          var worksheet = workbook.getWorksheet(1);

          // 输出表格数据
          worksheet.eachRow({ includeEmpty: true }, function (row, rowNumber) {
            console.log('Row ' + rowNumber + ' = ' + JSON.stringify(row.values));
          });
        });
      };
      reader.readAsArrayBuffer(file);
    }
  });
  input.click();
});

在上例中，我们利用 FileReader() 对象将读取到的二进制数据转换为 ArrayBuffer，再传入 ExcelJS.Workbook().xlsx.load() 方法中，生成一个新的工作簿。最后，我们利用 eachRow() 方法遍历工作表中每一行的数据，并通过控制台输出。