在Angular 5中,你可以使用ngx-csv
库来实现多表格CSV导出。以下是一个示例解决方法:
首先,安装ngx-csv
库:
npm install ngx-csv
然后,在你的组件中引入ngx-csv
库和@ViewChild
装饰器:
import { Component, ViewChild } from '@angular/core';
import { AngularCsv } from 'ngx-csv';
在你的组件类中,定义一个@ViewChild
装饰器来获取表格的引用:
export class YourComponent {
@ViewChild('table1') table1: any;
@ViewChild('table2') table2: any;
// ...
exportCSV() {
const options = {
fieldSeparator: ',',
quoteStrings: '"',
decimalSeparator: '.',
showLabels: true,
showTitle: false,
title: 'My Awesome CSV',
useTextFile: false,
useBom: true,
headers: ['Column 1', 'Column 2', 'Column 3']
};
const data1 = this.table1.nativeElement.innerText;
const data2 = this.table2.nativeElement.innerText;
const csvData = [
{ title: 'Table 1', data: data1 },
{ title: 'Table 2', data: data2 }
];
new AngularCsv(csvData, 'My CSV', options);
}
}
在你的模板中,为每个要导出的表格设置一个标识符,并使用@ViewChild
装饰器引用它们:
在上面的示例中,我们使用@ViewChild
装饰器来获取表格的引用,并将表格的innerText传递给ngx-csv
库的AngularCsv
类来生成CSV文件。你可以根据你的需求修改options
对象。
当你点击"导出CSV"按钮时,将导出两个表格的CSV文件,并将其命名为"My CSV"。每个表格都将称为一个单独的CSV文件,并包含一个标题行和相应的数据行。
希望这个示例能帮助到你!