我想导出过滤/排序的数据(或应用于表的任何其他操作,例如:隐藏特定的列)而不是导出所有的数据。有没有办法做到这一点?我是相当新的Angular ,如果你能用简单的语言来解释,这将是伟大的!
以下是我的代码
excel.service.ts:
import { Injectable } from '@angular/core';
import * as FileSaver from 'file-saver';
import * as XLSX from 'xlsx';
const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
const EXCEL_EXTENSION = '.xlsx';
@Injectable({
providedIn: 'root'
})
export class ExcelService {
constructor() { }
public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
delete (worksheet[1])
const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
this.saveAsExcelFile(excelBuffer, excelFileName);
}
private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});
FileSaver.saveAs(data, fileName + '_' + new Date().toLocaleDateString() + EXCEL_EXTENSION);
}
}
table.component.ts:
showTCExportMenu=false
showTEExportMenu=false
exportAsXLSX(data, name, reimport=false):void {
let table = data
reimport? null: table.forEach(
table => { table.justification? table.justification = table.justification.replace(/<\/?(?!a)\w*\b[^>]*>/ig, ''): null,
table.evidence? table.evidence = table.evidence.replace(/<\/?(?!a)\w*\b[^>]*>/ig, ''): null,
delete table.id, delete table.log
})
// execu ? this.getTestExecu(this.uuid): this.getTestCat(this.uuid)
this.excelService.exportAsExcelFile(table, name);
this.showTCExportMenu=false
this.showTEExportMenu=false
}
table.component.html:
<div>
<clr-datagrid [(clrDgSelected)]="selected">
<clr-dg-column
*ngFor="let column of columns"
[clrDgField]="getStringKey(column.key)">
<ng-container *clrDgHideableColumn="{hidden: false}">
{{column.title}}
</ng-container>
<clr-dg-filter
*ngIf="column?.filter"
[clrDgFilter]="getFilter(column)">
<ng-container filterHost></ng-container>
</clr-dg-filter>
</clr-dg-column>
<clr-dg-row
*clrDgItems="let item of records"
[clrDgItem]="item">
<clr-dg-cell
*ngFor="let column of columns"
[innerHTML]="renderValue(column, item)">
</clr-dg-cell>
<clr-dg-row-detail
[innerHTML]="expandRowRender && expandRowRender(item)"
*clrIfExpanded>
</clr-dg-row-detail>
</clr-dg-row>
<clr-dg-footer>
<button class="btn" (click)="exportAsXLSX(tableData, 'example', true)">Export to excel</button>
<clr-dg-pagination #pagination >
<clr-dg-page-size [clrPageSizeOptions]="[5,10,20,30, 50, 100]">Users per page</clr-dg-page-size>
{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
of {{pagination.totalItems}} records
</clr-dg-pagination>
</clr-dg-footer>
</clr-datagrid>
</div>
下面是我从API catone.component.ts获取数据位置:
import { Component, OnInit } from '@angular/core';
import {TableColumns, TableData} from "../tableone/tableone.types";
import { faker } from '@faker-js/faker';
import {Observable, Subject} from "rxjs";
import {HttpClient} from "@angular/common/http";
import {ClrDatagridFilterInterface} from "@clr/angular";
import {AgefilterComponent} from "../agefilter/agefilter.component";
import {DatefilterComponent} from "../datefilter/datefilter.component";
interface InventoryData {
test_name: any;
description: any;
status: string;
test_level: string;
test_category: string;
test_type: string;
test_approach: string;
test_applicability: string;
requirement_accountability: string;
test_plan_accountability: string;
trigger_type: string;
applicable_metadata_statuses: string;
assessment_level_targeted: string;
comp_control_flag: string;
testing_platform: string;
effective_date: Date;
test_retired_date: Date;
metric_inclusion: string;
policy_requirement: string
}
export class AgeFilter implements ClrDatagridFilterInterface<InventoryData> {
changes = new Subject<any>();
public minAge!: number;
public maxAge!: number;
accepts(person: InventoryData): boolean {
return true
}
isActive(): boolean {
return false
}
}
export class BirthdayFilter implements ClrDatagridFilterInterface<InventoryData> {
changes = new Subject<any>;
value = '';
accepts(item: InventoryData): boolean {
return true
}
isActive(): boolean {
return false
}
}
@Component({
selector: 'catone',
templateUrl: './catone.component.html',
styleUrls: ['./catone.component.scss']
})
export class CatoneComponent implements OnInit {
columns: TableColumns<InventoryData> = [
{
title: 'Test_name',
key: 'test_name'
},
{
title: 'Description',
key: 'description'
},
{
title: 'Status',
key: 'status'
},
{
title: 'Test_level',
key: 'test_level'
},
{
title: 'Test_category',
key: 'test_category'
},
{
title: 'Test_type',
key: 'test_type',
},
{
title: 'Test_approach',
key: 'test_approach',
},
{
title: 'Test_applicability',
key: 'test_applicability',
},
{
title: 'Requirement_accountability',
key: 'requirement_accountability',
},
{
title: 'Test_plan_accountability',
key: 'test_plan_accountability',
},
{
title: 'Trigger_type',
key: 'trigger_type',
},
{
title: 'Applicable_metadata_statuses',
key: 'applicable_metadata_statuses',
},
{
title: 'Assessment_level_targeted',
key: 'assessment_level_targeted',
},
{
title: 'Comp_control_flag',
key: 'comp_control_flag',
},
{
title: 'Testing_platform',
key: 'testing_platform',
},
{
title: 'Effective_date',
key: 'effective_date',
},
{
title: 'Test_retired_date',
key: 'test_retired_date',
},
{
title: 'Metric_inclusion',
key: 'metric_inclusion',
},
{
title: 'Policy_requirement',
key: 'policy_requirement',
},
];
tableData: TableData<InventoryData> | Observable<TableData<InventoryData>> = [];
page = 1;
pageSize = 10;
total = 1000;
constructor(private httpClient: HttpClient) { }
renderExpand(p: InventoryData) {
return `
<pre>${'test name: ' + p.test_name}</pre>
`
}
handlePageChange(page: number) {
this.page = page;
this.requestApi();
}
requestApi() {
this.httpClient.get<InventoryData[]>(`myapi`)
.subscribe(data => {
this.tableData = data
})
}
ngOnInit(): void {
this.requestApi();
}
}
1条答案
按热度按时间vc6uscn91#
没有任何外部库,您可以使用此函数,请注意,行(在类CSVargs中)是要下载的数据,因此,如果您传递已排序的行或/和特定长度的行,则应工作