如何从Angular Material 5 Mat-Table(Angular Material Table)中导出Excel文件? [英] How to export Excel file from Angular Material 5 Mat-Table (Angular Material Table)?
本文介绍了如何从Angular Material 5 Mat-Table(Angular Material Table)中导出Excel文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Angular的新手，使用Angular material 5 mat-table并尝试将表导出到excel文件中.我使用了 SheetJS XLSX 软件包.
I am new to Angular and using Angular material 5 mat-table and trying to export the table in a excel file. I have use SheetJS XLSX package.
下面是我的代码:
Table.component.html:
<mat-table #table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<!--<ng-container matColumnDef="ID">
<mat-header-cell *matHeaderCellDef mat-sort-header> UserID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.UserID}} </mat-cell>
</ng-container>-->
<!-- Progress Column -->
<ng-container matColumnDef="MSID">
<mat-header-cell *matHeaderCellDef mat-sort-header> MSID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.MSID}} </mat-cell>
</ng-container>
<ng-container matColumnDef="MSPW">
<mat-header-cell *matHeaderCellDef mat-sort-header> MS Password </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.MSPW}} </mat-cell>
</ng-container>
<ng-container matColumnDef="MSRequsest">
<mat-header-cell *matHeaderCellDef mat-sort-header> MS Requsest </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.MSRequsest}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ClassID">
<mat-header-cell *matHeaderCellDef mat-sort-header> Class ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.ClassID}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ClassName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Class Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.ClassName}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="FirstName">
<mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.FirstName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="LastName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.LastName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Email">
<mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.Email}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Role">
<mat-header-cell *matHeaderCellDef mat-sort-header> Role </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.EmployeeRole}} </mat-cell>
</ng-container>
<ng-container matColumnDef="EmployeeRoleFrom">
<mat-header-cell *matHeaderCellDef mat-sort-header> Employee Role From </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.EmployeeRoleFrom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="VendorID">
<mat-header-cell *matHeaderCellDef mat-sort-header> Vendor ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.VendorID}} </mat-cell>
</ng-container>
<ng-container matColumnDef="VendorNameCompany">
<mat-header-cell *matHeaderCellDef mat-sort-header> Vendor Name Company </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.VendorNameCompany}} </mat-cell>
</ng-container>
<ng-container matColumnDef="StaffID">
<mat-header-cell *matHeaderCellDef mat-sort-header> Staff ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.StaffID}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Source">
<mat-header-cell *matHeaderCellDef mat-sort-header> Source </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.Source}} </mat-cell>
</ng-container>
<ng-container matColumnDef="HireDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Hire Date </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.HireDate}} </mat-cell>
</ng-container>
<ng-container matColumnDef="HireType">
<mat-header-cell *matHeaderCellDef mat-sort-header> Hire Type </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.HireType}} </mat-cell>
</ng-container>
<ng-container matColumnDef="EnteredDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Entered Date </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.EnteredDate}} </mat-cell>
</ng-container>
<ng-container matColumnDef="FloorDate">
<mat-header-cell *matHeaderCellDef mat-sort-header> Floor Date </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.FloorDate}} </mat-cell>
</ng-container>
<ng-container matColumnDef="SiteLocation">
<mat-header-cell *matHeaderCellDef mat-sort-header> Site Location </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.SiteLocation}} </mat-cell>
</ng-container>
<ng-container matColumnDef="EmployeeContractorID">
<mat-header-cell *matHeaderCellDef mat-sort-header> Employee Contractor ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.EmployeeContractorID}} </mat-cell>
</ng-container>
<ng-container matColumnDef="TransferFrom">
<mat-header-cell *matHeaderCellDef mat-sort-header> Transfer From </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.TransferFrom}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Notes">
<mat-header-cell *matHeaderCellDef mat-sort-header> Notes </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.Notes}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Status">
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.Status}} </mat-cell>
</ng-container>
<!-- Action Column -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
Table.component.ts:
import { Component, OnInit, ViewChild, ChangeDetectorRef,ElementRef} from '@angular/core';
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
import { WorkflowService } from "../workflow.service";
import { HttpClient } from '@angular/common/http';
import {DataSource} from '@angular/cdk/collections';
import * as XLSX from 'xlsx/xlsx';
@Component({
selector: 'app-table-doc',
templateUrl: './table-doc.component.html',
styleUrls: ['./table-doc.component.css']
})
export class TableDocComponent implements OnInit {
@ViewChild('TABLE') table: ElementRef;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
displayedColumns = ['MSID','MSPW','MSRequsest','ClassID','ClassName',
'FirstName','LastName','Email','Role','EmployeeRoleFrom','VendorID',
'VendorNameCompany','StaffID','Source','HireDate','HireType','EnteredDate',
'FloorDate','SiteLocation','EmployeeContractorID','TransferFrom','Notes','Status',
];
dataSource = new MatTableDataSource();
constructor( private http:HttpClient,private workflowService : WorkflowService,private changeDetectorRefs: ChangeDetectorRef) {
}
ngOnInit() {
this.tableDataSource();
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
tableDataSource(){
this.workflowService.GetUploadDocData().subscribe(
data => {
this.dataSource.data = data ;
}
);
}
ExportTOExcel()
{
const ws:XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
const wb:XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
console.log(this.table.nativeElement);
/* save to file */
XLSX.writeFile(wb, 'SheetJS.xlsx');
}
}
我正在使用npm i XLSX并出现一些错误.
I am using npm i XLSX and getting some error.
错误:
错误范围(0):A1:A0
Bad range (0): A1:A0
[对象错误] {说明:错误范围(...)"，消息:错误范围(..."，名称:错误"，ngDebugContext:对象{...}，堆栈:错误:错误..."}
[object Error]{description: "Bad range (...", message: "Bad range (...", name: "Error", ngDebugContext: Object {...}, stack: "Error: Bad ..."}
这是怎么了?
还有什么其他方法可以从Angular Material Table导出excel，我也需要对表进行分页.
is there any other way to export excel from Angular Material Table, I also need the pagination for my table.
推荐答案
为时已晚，但我尝试... 我发现了相同的问题，并通过以下方式解决了问题: 从
Too late, but I try... I found the same problem and fixed this way: Change HTML tags from
<mat-table...>...</mat-table>至<table mat-table...>...</table>
<mat-header-cell ...>...</mat-header-cell>至<th mat-header-cell....>...</th>
<mat-cell...>...</mat-cell>至<td mat-cell ...>...</td>
仅此而已，XLSX不能识别物料标签，但可以识别物料属性.
That's all, XLSX not recognize material tags, but the material attributes.
这篇关于如何从Angular Material 5 Mat-Table(Angular Material Table)中导出Excel文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
