在导出MatTable组件时,在文件名中添加时间戳可以通过以下步骤实现:
import { Component, ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';
@ViewChild(MatTable) table: MatTable<any>;
exportTable() {
const time = new Date().getTime(); // 获取当前时间戳
const fileName = `table_${time}.csv`; // 创建带有时间戳的文件名
// 导出逻辑,这里以导出CSV文件为例
const csvData = this.convertToCSV(this.dataSource); // 将数据转换为CSV格式
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }); // 创建Blob对象
const link = document.createElement('a'); // 创建一个下载链接
if (link.download !== undefined) {
const url = URL.createObjectURL(blob); // 创建下载链接的URL
link.setAttribute('href', url);
link.setAttribute('download', fileName); // 设置下载文件的名称
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click(); // 触发点击事件下载文件
document.body.removeChild(link); // 下载完成后移除下载链接
}
}
// 将数据转换为CSV格式的辅助方法
convertToCSV(data: any[]): string {
const separator = ','; // CSV文件中的分隔符
const keys = Object.keys(data[0]); // 获取数据对象的键
const header = keys.join(separator); // 创建CSV文件的表头
const rows = data.map(item => {
return keys.map(key => {
return item[key];
}).join(separator);
}); // 创建CSV文件的数据行
return `${header}\n${rows.join('\n')}`; // 返回完整的CSV文件内容
}
<button mat-raised-button color="primary" (click)="exportTable()">导出</button>
这样,当用户点击导出按钮时,将会触发exportTable方法,生成带有时间戳的文件名,并将数据导出为CSV文件。你可以根据需要修改导出的文件格式和内容。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云