Angular TypeScript 实现按指定日期区间导出数据为CSV

前置准备 #

你已经跑通无参数的全量导出逻辑、接好了Material DatePicker组件可以拿到用户选定的起止日期，整个改造只需要3个核心环节，不需要改动已有的CSV生成逻辑。

1. 组件内绑定DatePicker的取值并做基础校验 #

首先在组件类中定义两个属性，双向绑定DatePicker的选中值：

// 组件类属性定义
selectedStartDate: Date;
selectedEndDate: Date;

在模板的DatePicker输入框上通过[(ngModel)]把值绑定到上面两个属性即可。
在downloadCSVByDate方法的最开头加拦截校验，避免发无效请求：

downloadCSVByDate() {
  // 校验是否选全日期
  if (!this.selectedStartDate || !this.selectedEndDate) {
    alert('请选择完整的起止日期后再导出');
    return;
  }
  // 校验日期逻辑合法性
  if (this.selectedStartDate > this.selectedEndDate) {
    alert('开始日期不能晚于结束日期，请重新选择');
    return;
  }

2. 改造服务层的exportDataByDate方法透传日期参数 #

原来的exportDataByDate是无参方法，需要调整为接收两个日期参数，按后端接口约定的格式把日期传到请求里，规避常见的时间匹配偏差问题：

// 放在你的dataSvc服务文件中
exportDataByDate(startDate: Date, endDate: Date) {
  // 自定义日期格式化方法，输出后端通用的yyyy-MM-dd格式
  const formatToPlainDate = (date: Date): string => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  // 把日期转为HTTP查询参数
  const requestParams = new HttpParams()
    .set('startDate', formatToPlainDate(startDate))
    .set('endDate', formatToPlainDate(endDate));
  // 发送带参数的请求
  return this.http.get('你的区间数据导出接口地址', { params: requestParams });
}

注意：不要直接把Date对象序列化后传给后端，Material DatePicker返回的时间对象带时区偏移，很容易出现差一天的匹配错误，必须先格式化为纯日期字符串。

3. 组件内调用服务方法拿到匹配数据生成CSV #

调整downloadCSVByDate方法中服务调用的入参，把校验通过的两个日期传给服务层，后续CSV生成逻辑和原有全量导出逻辑完全一致：

downloadCSVByDate() {
  // 前面的日期校验逻辑
  if (!this.selectedStartDate || !this.selectedEndDate) {
    alert('请选择完整的起止日期后再导出');
    return;
  }
  if (this.selectedStartDate > this.selectedEndDate) {
    alert('开始日期不能晚于结束日期，请重新选择');
    return;
  }

  // 调用带日期参数的服务方法
  this.dataSvc.exportDataByDate(this.selectedStartDate, this.selectedEndDate).subscribe(data => {
    this.export = data;
    // 原有逐次循环push的逻辑可以简化为直接展开数组，减少冗余代码
    const jsonArrayObject = [...this.export['data']];
    // 原有CSV生成逻辑完全复用，无需修改
    new AngularCsv(jsonArrayObject, "ExgenReceipts", this.csvOptions);
  })
}

临时兜底方案（暂不支持后端改接口时用） #

如果暂时无法让后端改造接口支持参数筛选，可以在前端拿到全量数据后，根据数据内的日期字段做本地过滤：

// 拿到全量返回数据后先做过滤
const filteredExportData = this.export['data'].filter(item => {
  // 替换成你实际数据里的日期字段名
  const recordDate = new Date(item.actualRecordDate).getTime();
  const startTimestamp = this.selectedStartDate.getTime();
  const endTimestamp = this.selectedEndDate.getTime();
  return recordDate >= startTimestamp && recordDate <= endTimestamp;
})
// 把过滤后的数组传给AngularCsv生成文件
new AngularCsv(filteredExportData, "ExgenReceipts", this.csvOptions);

这个方案仅适合数据量较小的场景，数据量较大时会出现页面加载卡顿，长期还是要走后端筛选的逻辑。

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