如何从Angular Material 5 Mat-Table(Angular Material Table)中导出Excel文件?

时间:2018-06-21 14:09:58

标签: excel angular-material angular5 xlsx sheetjs

我是Angular的新手,使用Angular material 5 mat-table并尝试将表导出到excel文件中。我使用了 SheetJS XLSX 包。

下面是我的代码:

Table.component.html:

Message: OpenQA.Selenium.StaleElementReferenceException : stale element reference: element is not attached to the page document

Table.component.ts:

    <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>

我正在使用npm i XLSX并出现一些错误。

错误:

  
    

错误范围(0):A1:A0

  
     

[对象错误] {说明:“错误范围(...)”,消息:“错误范围(...”,名称:“错误”,ngDebugContext:对象{...},堆栈:“错误:不好...“}

这是怎么了?

还有什么其他方法可以从Angular Material Table导出excel,我也需要对表进行分页。

2 个答案:

答案 0 :(得分:1)

SheetJS XLSX与Angular Material 5及更高版本不兼容,因为它读取表格标签,其中从病区的材质5开始使用垫子表格。

答案 1 :(得分:0)

为时已晚,但我尝试... 我发现了相同的问题,并通过以下方式解决了问题: 从

更改HTML标签

<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不能识别物料标签,但可以识别物料属性。