Angular 导出 Excel 文件的方法

背景

在实际的项目开发中，经常需要导出数据到 Excel 文件，例如导出 Excel 报表、导出数据备份等等。而在 Angular 框架中，我们可以通过使用本地 JavaScript 库 SheetJS 来实现导出 Excel 文件的功能。

安装 SheetJS

首先我们需要安装 SheetJS。可以通过命令行在项目的根目录下使用 npm 进行安装：

npm install xlsx --save

使用 SheetJS

安装完 SheetJS 后，我们就可以在 Angular 应用中使用它了。下面我们来演示一下如何使用 SheetJS 导出数据到 Excel 文件。

准备数据

首先，我们需要准备一些数据。在本例中，我们准备了一个数组如下：

const data = [
  { name: '小明', age: 18, address: '北京市' },
  { name: '小红', age: 20, address: '上海市' },
  { name: '小强', age: 22, address: '广州市' },
];

创建 Excel 工作簿

接下来，我们需要使用 SheetJS 来创建一个空的 Excel 工作簿对象：

const workbook = XLSX.utils.book_new();

添加数据到工作簿

然后，我们需要将上面准备好的数据添加到工作簿中。我们可以使用 XLSX.utils.json_to_sheet() 函数将 JSON 对象转换为一个工作表。注意，此函数使用的是 SheetJS 内部的 A1 列表示法。

const worksheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, '数据表');

这个函数的第三个参数是工作表的名称，可以根据需要进行修改。

导出 Excel 文件

最后，我们使用 SheetJS 提供的 XLSX.writeFile() 函数将工作簿导出成一个 Excel 文件。该函数将根据文件名的扩展名自动选择文件格式，例如 .xlsx、.xlsm、.xlsb 和 .xls。

XLSX.writeFile(workbook, '数据表.xlsx');

这个函数的第二个参数是文件名，可以根据需要进行修改。

完整示例代码

下面是一个完整的示例代码，其中包括了上述每个步骤：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import * as XLSX from 'xlsx';

@Component({
  selector: 'app-export-to-excel-button',
  template: `
    <button (click)="exportToExcel()">导出 Excel</button>
  `,
})
export class ExportToExcelButtonComponent {
  exportToExcel(): void {
    const data = [
      { name: '小明', age: 18, address: '北京市' },
      { name: '小红', age: 20, address: '上海市' },
      { name: '小强', age: 22, address: '广州市' },
    ];

    const workbook = XLSX.utils.book_new();
    const worksheet = XLSX.utils.json_to_sheet(data);

    XLSX.utils.book_append_sheet(workbook, worksheet, '数据表');
    XLSX.writeFile(workbook, '数据表.xlsx');
  }
}

总结

在 Angular 中使用 SheetJS 导出 Excel 文件非常简单。只需要安装 SheetJS 和使用它提供的函数，即可轻松地将数据导出到 Excel 文件中。但是需要注意的是，SheetJS 本身并不支持 Excel 文件的读取和写入密码保护，因此在需要保护 Excel 文件的安全时，请使用其他的 Node.js 或服务器端的解决方案。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654848e17d4982a6eb290061