Как экспортировать файл Excel из таблицы угловых материалов 5 (Таблица угловых материалов)?

Question

Как экспортировать файл Excel из таблицы угловых материалов 5 (Таблица угловых материалов)?

Я новичок в Angular и использую матовый стол Angular Material 5 и пытаюсь экспортировать таблицу в файл Excel. Я использую пакет SheetJS XLSX.

Ниже мой код:

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 я XLSX и получаю некоторые ошибки.

ОШИБКА:

Неверный диапазон (0): A1: A0
[ошибка объекта]{описание: "Неверный диапазон (...", сообщение: "Неверный диапазон (...", имя: "Ошибка", ngDebugContext: Object {...}, стек: "Ошибка: плохой.."). ".}

что здесь не так?

Есть ли другой способ экспортировать Excel из таблицы угловых материалов, мне также нужна нумерация страниц для моей таблицы.

0

excel angular-material angular5 xlsx sheetjs

Источник

user2112123 21 июн '18 в 14:09

1 ответ

Другие вопросы по тегам excel angular-material angular5 xlsx sheetjs

user5342452 03 июл '18 в 14:26 2018-07-03 14:26 · Answer 1 · 2018-07-03 14:26

SheetJS XLSX не совместим с Angular Material 5 и выше, потому что он читает табличный тег, где, как и из материала 5 на палатах, используется матовый стол.

1

Источник

user5342452 03 июл '18 в 14:26

user11610162 28 июл '19 в 13:37 2019-07-28 13:37 · Answer 2 · 2019-07-28 13:37

Слишком поздно, но я пытаюсь... Я обнаружил ту же проблему и исправил ее следующим образом: измените теги 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 распознает не теги материалов, а атрибуты материалов.