Angular Material表格导出：根据路由名称动态修改导出文件名

Got it, let's get your export filename to automatically match the current route name. Here's a straightforward approach tailored to your existing code:

Step 1: Inject Router/ActivatedRoute in Your Header Component #

First, we need to access the current route information in your header component. You can use either Router (to extract the route URL path) or ActivatedRoute (if you want to set custom friendly names for routes).

Option A: Use Router to Extract Route Path #

If you want to use the last segment of your route URL (e.g., route1 from /route1):

import { Router } from '@angular/router';

// In your header component's constructor
constructor(private router: Router) {}

exportTable() {
  // Grab the last part of the current URL as the route name
  const currentRouteName = this.router.url.split('/').pop() || 'Table Data';
  TableUtil.exportToExcel('ExampleTable', currentRouteName);
}

Option B: Use ActivatedRoute with Custom Route Titles #

For cleaner, user-friendly filenames, define custom titles in your route config first:

// In your app-routing.module.ts
const routes: Routes = [
  { path: 'route1', component: Route1Component, data: { exportTitle: '1' } },
  { path: 'route2', component: Route2Component, data: { exportTitle: '2' } },
];

Then retrieve this title in your header component:

import { ActivatedRoute } from '@angular/router';

// In your header component's constructor
constructor(private route: ActivatedRoute) {}

exportTable() {
  // Fetch the custom title from the current route's data
  const currentRouteName = this.route.snapshot.data['exportTitle'] || 'Table Data, excel format';
  TableUtil.exportToExcel('ExampleTable', currentRouteName);
}

Step 2: Verify Your TableUtil Logic #

Great news—your existing TableUtil code already supports dynamic prefixes! The name parameter you pass will overwrite the default prefix. Just keep this logic as-is:

static exportToExcel(tableId: string, name?: string) {
  let timeSpan = new Date().toISOString();
  let prefix = name || "Table Data, excel format";
  let fileName = `${prefix}-${timeSpan}`;
  let targetTableElm = document.getElementById(tableId);
  let wb = XLSX.utils.table_to_book(targetTableElm, <XLSX.Table2SheetOpts> { sheet: prefix });
  XLSX.writeFile(wb, `${fileName}.xlsx`);
}

How It Works #

• When you switch to route1, the export button will pass '1' (or 'route1' if using Option A) as the prefix, resulting in a filename like 1-2024-05-20T12:34:56.789Z.xlsx.
• For route2, it'll use '2' (or 'route2'), giving you 2-2024-05-20T12:34:56.789Z.xlsx.

This keeps your existing export functionality intact while adding the dynamic filename behavior you need.

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