在 Angular 中实现 Excel 导入和导出

Excel 是一个经常用于数据处理和管理的工具，而在 Web 开发中，很多时候我们需要将 Excel 文件导入或导出到 Web 应用中。Angular 是一款现代化、高效的前端框架，本文将介绍如何在 Angular 中实现 Excel 文件导入和导出的操作。

Excel 文件导入

安装依赖

首先，我们需要安装用于导入 Excel 文件的依赖库——xlsx。可以使用以下命令进行安装：

npm install xlsx --save

读取 Excel 文件内容

在 Angular 中，我们可以通过HttpClient模块获取 Excel 文件的二进制数据，然后通过FileReader对象将其读取为 ArrayBuffer。接着，我们可以使用xlsx库中的read函数来解析 ArrayBuffer，获取 Excel 文件的内容。实现代码如下：

import { HttpClient } from '@angular/common/http';
import * as XLSX from 'xlsx';

export class ExcelService {
  constructor(private http: HttpClient) {}

  readExcelFile(url: string) {
    this.http.get(url, { responseType: 'arraybuffer' }).subscribe((res) => {
      const arrayBuffer = res;
      const data = new Uint8Array(arrayBuffer);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[worksheetName];
      const json = XLSX.utils.sheet_to_json(worksheet, { raw: true });
      console.log(json);
    });
  }
}

以上代码演示了如何从指定 URL 中读取 Excel 文件，并将其解析为 JSON 格式的数据，最后输出到控制台。

Excel 文件导出

安装依赖

在 Angular 中，我们可以使用FileSaver.js库来实现 Excel 文件的导出。首先，我们需要安装该库：

npm install file-saver --save

编写导出功能

在导出 Excel 文件时，我们需要将数据转换为Workbook对象，然后将其写入到Blob对象中。接着，通过FileSaver库提供的saveAs()方法将Blob对象保存为 Excel 文件即可。

以下是具体的实现方式：

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';

interface ExportExcelOptions {
  fileName: string;
  sheetName: string;
  header: string[];
  data: any[];
}

@Injectable({
  providedIn: 'root',
})
export class ExcelService {
  constructor() {}

  exportExcelFile(options: ExportExcelOptions) {
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.json_to_sheet(options.data, {
      header: options.header,
    });
    XLSX.utils.book_append_sheet(wb, ws, options.sheetName);
    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([wbout], {
      type:
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
    });
    FileSaver.saveAs(blob, `${options.fileName}.xlsx`);
  }
}

以上代码演示了如何对指定的数据进行导出 Excel 操作，并将其保存为指定的 Excel 文件。

总结

在 Angular 中实现 Excel 文件的导入和导出，可以通过xlsx、FileSaver等库来完成。对于文件导入，我们需要通过HttpClient模块获取 Excel 的二进制数据，使用xlsx库解析 Excel 内容；对于文件导出，则需要将数据转换为 Sheet 对象，并通过FileSaver库保存为 Excel 文件。这些技术在实际开发过程中具有很高的指导意义，可以提高开发效率并优化数据处理流程。

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