Angular带分页筛选表格导出Excel异常：仅导出当前页且方案报错

你的问题根源在于当前代码是从DOM中读取表格元素生成Excel，但分页组件仅渲染了当前页的行，所以只能导出当前显示的5/10条数据。要导出所有符合筛选条件的数据，应该直接使用组件中存储的完整筛选后数据集来生成Excel，而非依赖DOM元素。

修改ExcelService #

新增一个接收数据数组和表头配置的方法，直接基于数据生成Excel：

import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';

const EXCEL_EXTENSION = '.xlsx';

@Injectable()
export class ExcelService {

  constructor() { }

  // 原方法保留（如需导出DOM表格的场景）
  public exportAsExcelFile(tableid:string, name?: string): void {
    const timeSpan = new Date().toISOString();
    const fileName = `${name}-${timeSpan}`;
    const targetTableElm = document.getElementById(tableid);
    const wb = XLSX.utils.table_to_book(targetTableElm, { sheet: name } as XLSX.Table2SheetOpts);
    XLSX.writeFile(wb, `${fileName}${EXCEL_EXTENSION}`);
  }

  // 新增方法：导出完整数据数组
  public exportDataAsExcelFile(data: any[], headerConfig: {key: string, label: string}[], sheetName?: string): void {
    const timeSpan = new Date().toISOString();
    const fileName = `${sheetName || 'data'}-${timeSpan}`;
    
    // 构造带表头的工作表数据
    const wsData = [
      // 生成表头行
      headerConfig.map(h => h.label),
      // 生成数据行：按表头key提取对应字段值
      ...data.map(item => headerConfig.map(h => item[h.key]))
    ];

    const ws = XLSX.utils.aoa_to_sheet(wsData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, sheetName || 'Sheet1');
    
    XLSX.writeFile(wb, `${fileName}${EXCEL_EXTENSION}`);
  }
}

修改Component代码 #

在组件中调用新增的方法，传入筛选后的完整数据和表头配置：

// 假设组件中已定义：
// filteredData: any[]; // 存储所有符合筛选条件的完整数据
// tableHeaders = [
//   {key: 'matricola', label: '学号'},
//   {key: 'name', label: '姓名'},
//   {key: 'department', label: '部门'}
// ]; // 对应表格的列配置

createExcelFile(){
  // 调用新增方法，传入完整筛选数据和表头
  this.excelservice.exportDataAsExcelFile(
    this.filteredData, 
    this.tableHeaders, 
    'Matricola_' + Date.now()
  );
}

关键说明 #

• filteredData需要是你组件中存储的所有符合当前筛选条件的数据数组，而非分页后的子集。
• headerConfig用来映射数据字段和Excel表头显示名称，确保导出的Excel表头和表格显示一致。
• 这种方式绕过了DOM渲染的限制，直接从数据源生成Excel，不管分页设置，都能导出全部筛选结果。

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