js怎么下载excel表格

使用JavaScript下载Excel表格的方法有多种，主要包括：使用第三方库、生成CSV文件、结合后端服务等。 本文将重点介绍其中一种方法，即如何使用第三方库“SheetJS”来实现这一目标。

SheetJS是一款非常流行的JavaScript库，能够快速、方便地处理Excel文件。通过使用该库，你可以轻松地在前端生成并下载Excel表格。接下来，我们将详细介绍如何使用SheetJS实现这一功能。

一、安装和引入SheetJS

1、通过npm安装

首先，我们需要在项目中安装SheetJS。你可以使用npm或yarn来安装：

npm install xlsx

2、通过CDN引入

如果你不想使用npm，你还可以通过CDN引入SheetJS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>

无论采用哪种方式，引入SheetJS之后，你就可以在JavaScript代码中使用它了。

二、创建和填充Excel表格

1、创建工作簿和工作表

首先，我们需要创建一个工作簿（Workbook）和工作表（Worksheet）。在SheetJS中，工作簿是一个包含多个工作表的对象，而工作表是一个二维数组。

// 创建一个新的工作簿
var wb = XLSX.utils.book_new();
// 创建一个新的工作表
var ws_data = [
  ["S", "h", "e", "e", "t", "J", "S"],
  [1, 2, 3, 4, 5, 6, 7]
];
// 将二维数组转换为工作表对象
var ws = XLSX.utils.aoa_to_sheet(ws_data);

2、将工作表添加到工作簿中

接下来，我们需要将创建的工作表添加到工作簿中：

XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

三、生成并下载Excel文件

1、生成Excel文件

现在，我们已经创建了一个包含数据的Excel工作簿。接下来，我们需要生成一个Excel文件并提供下载链接。

// 生成Excel文件
var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

2、创建下载链接

为了让用户能够下载生成的Excel文件，我们需要创建一个下载链接。首先，我们需要将生成的二进制文件转换为Blob对象，然后创建一个指向该Blob对象的URL。

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
  return buf;
}
var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
var url = URL.createObjectURL(blob);

3、创建并点击下载链接

最后，我们需要创建一个下载链接并自动点击它，以便用户下载生成的Excel文件。

var a = document.createElement("a");
a.href = url;
a.download = "example.xlsx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

四、完整示例代码

<!DOCTYPE html>
<html>
<head>
  <title>Download Excel</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
</head>
<body>
  <button id="download">Download Excel</button>
  <script>
    document.getElementById('download').addEventListener('click', function () {
      // 创建一个新的工作簿
      var wb = XLSX.utils.book_new();
      // 创建一个新的工作表
      var ws_data = [
        ["S", "h", "e", "e", "t", "J", "S"],
        [1, 2, 3, 4, 5, 6, 7]
      ];
      // 将二维数组转换为工作表对象
      var ws = XLSX.utils.aoa_to_sheet(ws_data);
      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 生成Excel文件
      var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
      // 将生成的二进制文件转换为Blob对象
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
      var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
      var url = URL.createObjectURL(blob);
      // 创建下载链接并自动点击
      var a = document.createElement("a");
      a.href = url;
      a.download = "example.xlsx";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    });
  </script>
</body>
</html>

五、更多高级用法

1、样式和格式

SheetJS不仅可以生成简单的Excel文件，还支持添加样式和格式。例如，你可以为单元格设置字体、颜色、边框等。

2、处理复杂数据

除了简单的二维数组，SheetJS还支持处理更复杂的数据结构，如JSON对象。你可以使用XLSX.utils.json_to_sheet方法将JSON对象转换为工作表。

3、与后端服务结合

在实际项目中，你可能需要从服务器获取数据并生成Excel文件。你可以使用Ajax请求从服务器获取数据，然后使用SheetJS生成并下载Excel文件。

无论是简单的表格生成，还是复杂的数据处理，SheetJS都能够满足你的需求。通过本文的介绍，你应该已经掌握了使用JavaScript下载Excel表格的基本方法。希望这些内容对你有所帮助！