Angular中mat-table排序后如何将数据导出为JSON对象下载？

该需求完全可以实现，核心思路是先获取mat-table排序后的数据集，再将数据集转为JSON格式触发浏览器本地下载即可，具体操作步骤如下：

1. 确认排序绑定逻辑 #

你已经实现了mat-table排序，说明你已经在组件中引入了MatSort模块，并且将MatSort实例绑定到了MatTableDataSource的sort属性上，基础代码参考如下：

// 组件.ts
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export class YourComponent {
  // 原始表格数据替换为你自己的业务数据
  dataSource = new MatTableDataSource(yourOriginalTableData);
  @ViewChild(MatSort) sort!: MatSort;

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}

2. 新增下载相关方法 #

在组件类中新增获取排序后数据、触发下载的两个方法：

// 获取排序后的完整表格数据
getSortedTableData(): any[] {
  // 直接调用MatTableDataSource内置的sortData方法获取排序后的结果
  return this.dataSource.sortData(this.dataSource.data, this.dataSource.sort);
}

// 触发JSON文件本地下载
downloadSortedJson() {
  const sortedData = this.getSortedTableData();
  // 转换为带缩进的格式化JSON字符串
  const jsonStr = JSON.stringify(sortedData, null, 2);
  // 创建Blob对象
  const blob = new Blob([jsonStr], { type: 'application/json' });
  // 生成临时下载链接
  const tempUrl = window.URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  // 自定义下载的文件名
  downloadLink.download = '排序后表格数据.json';
  downloadLink.click();
  // 释放临时URL资源
  window.URL.revokeObjectURL(tempUrl);
}

3. 绑定下载触发入口 #

在组件模板文件中添加下载按钮，绑定点击事件即可：

<button mat-raised-button color="primary" (click)="downloadSortedJson()">
  下载排序后JSON数据
</button>

如果你没有使用官方的MatTableDataSource，而是自定义了数据源实现排序逻辑，直接取你自己维护的排序后的数组，替换上述getSortedTableData方法的返回值即可。

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