Angular中使用ngx-export-as导出多Sheet Excel的实现方法

嘿，我来帮你搞定这个多Sheet Excel导出的问题！ngx-export-as本身并没有直接提供多Sheet导出的API，但我们可以结合它和xlsx库来实现这个需求，步骤其实挺清晰的：

1. 安装必要依赖 #

首先确保你已经安装了ngx-export-as，同时还需要安装xlsx（用于处理Excel工作簿和工作表）和file-saver（用于保存文件）：

npm install ngx-export-as xlsx file-saver --save

2. 组件中导入所需模块与工具 #

在你的导出组件里，导入需要的模块和工具函数：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { ExportAsService, ExportAsConfig } from 'ngx-export-as';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { take } from 'rxjs/operators'; // 用于避免内存泄漏

3. 编写导出逻辑 #

核心思路是：分别为每个Sheet准备数据（可以是HTML表格或JSON），将每个Sheet的内容转换为Excel工作表对象，再合并到同一个工作簿中，最后导出为文件。

下面是完整的组件示例代码：

@Component({
  selector: 'app-multi-sheet-export',
  templateUrl: './multi-sheet-export.component.html',
  styleUrls: ['./multi-sheet-export.component.css']
})
export class MultiSheetExportComponent {
  // 获取页面上的两个表格元素（如果用HTML表格作为数据源）
  @ViewChild('productTable') productTable!: ElementRef;
  @ViewChild('userTable') userTable!: ElementRef;

  // 基础导出配置
  exportAsConfig: ExportAsConfig = {
    type: 'xlsx',
    elementIdOrContent: '', // 动态设置要导出的元素/内容
  };

  constructor(private exportAsService: ExportAsService) {}

  exportMultiSheetExcel() {
    // 处理第一个Sheet：从HTML表格生成
    this.exportAsConfig.elementIdOrContent = this.productTable.nativeElement;
    this.exportAsService.get(this.exportAsConfig)
      .pipe(take(1)) // 只取一次数据，避免内存泄漏
      .subscribe((buffer) => {
        // 解析第一个表格的Excel工作簿，提取工作表
        const wb1 = XLSX.read(buffer, { type: 'array' });
        const productSheet = wb1.Sheets[wb1.SheetNames[0]];

        // 处理第二个Sheet：从JSON数组生成（也可以用HTML表格）
        const userData = [
          ['用户ID', '用户名', '邮箱'],
          [1, '张三', 'zhangsan@example.com'],
          [2, '李四', 'lisi@example.com'],
          [3, '王五', 'wangwu@example.com']
        ];
        const userSheet = XLSX.utils.aoa_to_sheet(userData);

        // 创建新的工作簿，合并两个工作表
        const finalWorkbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(finalWorkbook, productSheet, '产品列表'); // 给Sheet命名
        XLSX.utils.book_append_sheet(finalWorkbook, userSheet, '用户列表');

        // 将工作簿转换为Blob并保存
        const excelBuffer = XLSX.write(finalWorkbook, { bookType: 'xlsx', type: 'array' });
        const blob = new Blob([excelBuffer], { 
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
        });
        saveAs(blob, '多Sheet导出示例.xlsx');
      });
  }
}

4. 配套的HTML模板 #

在模板中添加需要导出的表格和导出按钮：

<!-- 第一个表格：产品列表 -->
<table #productTable border="1">
  <thead>
    <tr>
      <th>产品ID</th>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>笔记本电脑</td>
      <td>¥9999</td>
    </tr>
    <tr>
      <td>2</td>
      <td>智能手机</td>
      <td>¥6999</td>
    </tr>
  </tbody>
</table>

<br>

<!-- 第二个表格：用户列表（这里用JSON生成，所以可以不用这个表格，只是示例） -->
<table #userTable border="1">
  <thead>
    <tr>
      <th>用户ID</th>
      <th>用户名</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>zhangsan@example.com</td>
    </tr>
  </tbody>
</table>

<button (click)="exportMultiSheetExcel()">导出多Sheet Excel</button>

注意事项 #

• 如果所有Sheet都来自HTML表格，你可以重复调用exportAsService.get()获取每个表格的buffer，解析后合并即可。
• 如果是JSON数据，直接使用xlsx的json_to_sheet（处理对象数组）或aoa_to_sheet（处理二维数组）生成工作表会更高效，无需通过ngx-export-as。
• 记得用take(1)操作符结束订阅，避免内存泄漏；如果是Angular 16+，也可以使用async/await结合firstValueFrom来代替订阅。

内容的提问来源于stack exchange，提问作者behroozbc