角度材料数据表导出为excel(代码片段)

author author     2023-05-13     374

关键词:

我使用角度材料数据表以表格格式显示数据。我需要包含一个将表格数据导出为ex​​cel的功能。我无法找到任何可以帮助我导出数据的文档。你能告诉我如何使用角度材料数据表将数据导出到角度为excel的excel。

我尝试使用XLSX.utils并面临“错误范围(0):A1:A0 at check_ws”问题。

Location.component.html

<div class="example-container" #TABLE> 

  <mat-table #table [dataSource]="dataSource" matSort matSortActive="locationName" matSortDirection="asc" matSortDisableClear>
    <ng-container matColumnDef="locationName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Location Name </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.locationName </mat-cell>
    </ng-container>
    <ng-container matColumnDef="address">
      <mat-header-cell *matHeaderCellDef>Address </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.address </mat-cell>
    </ng-container>
    <ng-container matColumnDef="city">
      <mat-header-cell *matHeaderCellDef mat-sort-header> City </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.city </mat-cell>
    </ng-container>
    <ng-container matColumnDef="country">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Country </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.country </mat-cell>
    </ng-container>
    <ng-container matColumnDef="zipcode">
      <mat-header-cell *matHeaderCellDef>ZipCode </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.zipcode </mat-cell>
    </ng-container>
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef>Phone </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.phone </mat-cell>
    </ng-container>
    <ng-container matColumnDef="timezone">
      <mat-header-cell *matHeaderCellDef> TimeZone </mat-header-cell>
      <mat-cell *matCellDef="let location"> location.timezone </mat-cell>
    </ng-container>
    <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <!-- <mat-cell *matCellDef="let location"> location.timezone </mat-cell> -->
      <mat-cell *matCellDef="let location">
      <a href ="#" class="btn Action-Tab" >Edit</a>&nbsp;&nbsp;
          <a href ="#" class="btn Action-Tab" >Delete</a>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;">
    </mat-row>
  </mat-table>

  <mat-paginator [pageSizeOptions]="[10, 20, 50,100]"></mat-paginator>

</div>
<button mat-raised-button color="primary" (click)="ExportTOExcel()">Export as Excel</button>

Location.component.ts

import  Component, OnInit, OnDestroy , ViewChild,ElementRef from '@angular/core';
import  ILocation  from '../../Ilocation';
import  LocationService  from '../../services/location.service';
import  DataTableResource  from 'angular5-data-table';
import  Subscription  from 'rxjs';
import MatPaginator, MatSort, MatTableDataSource from '@angular/material';
import DataSource from '@angular/cdk/table';
import * as XLSX from 'xlsx';
// import  CdkTableModule  from '@angular/cdk/table';

@Component(
  selector: 'app-location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
)
export class LocationComponent implements OnInit , OnDestroy
  errorMessage: string;
  filterBy : string;
  locations: ILocation[];
  items : ILocation[]=[];
  itemCount :number = 0;
  subscription:Subscription;
  limits = [5, 10, 20, 80];
  tableResource : DataTableResource<ILocation>;
  displayedColumns = ['locationName', 'address', 'city', 'country','zipcode', 'phone','timezone','action'];
  // dataSource: MatTableDataSource<ILocation>;
  dataSource;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort : MatSort;
  @ViewChild('TABLE', read: ElementRef ) table: ElementRef;

  constructor( private locationService: LocationService) 

   

   applyFilter(filterValue: string) 
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  

  ngOnInit() 
    this.subscription = this.locationService.getLocations()
    .subscribe(locations =>
       this.locations = locations;
       this.dataSource = new MatTableDataSource(locations);
       this.dataSource.sort = this.sort;
       this.dataSource.paginator = this.paginator;
       this.dataSource.table = this.table;
      ,
      error => this.errorMessage = <any>error);           
  

  ngOnDestroy()
    this.subscription.unsubscribe();

  

  ExportTOExcel()
  
    console.log("export");
    this.table.nativeElement.style.background = "red";
    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');

    /* save to file */
    XLSX.writeFile(wb,'SheetJS.xlsx');
    console.log("exported");

  


答案

您可以使用xlsx将表导出为ex​​cel。 用法 执行npm i xlsx

HTML:

<div class="example-container mat-elevation-z8 " #TABLE>
  <table mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> element.position </td>
      //..................................rest of the html
    <button mat-raised-button color="primary" (click)="exportAsExcel()">Export as Excel</button></div>

在您的组件中

import Component,ViewChild, ElementRef from '@angular/core';
 import * as XLSX from 'xlsx';
//......
    export class AppComponent  
      @ViewChild('TABLE') table: ElementRef;
    exportAsExcel()
    
      const ws: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);//converts a DOM TABLE element to a worksheet
      const wb: XLSX.WorkBook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

    
    

DEMO

另一答案

您需要在HTML文件中进行更改。代替 :

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">

好吗,

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

另一答案

您可以使用mat-table-exporter,它为角度材质表提供客户端excel导出支持。也支持分页。

它实际上是我最近为一个项目创建的一个库,它被积极维护并且已经在实时的多个项目中使用。

hutool工具导出excel代码示例(代码片段)

目录一、hutool工具导出excel代码示例1.1、pom.xml依赖包1.2、controller层代码(以查询user表数据为列导出excel)1.3、service层代码(以查询user表数据为列导出excel)1.4、service实现层代码(以查询user表数据为列导出excel)1.5、实体对象代码(以查... 查看详情

hutool工具导出excel代码示例(代码片段)

目录一、hutool工具导出excel代码示例1.1、pom.xml依赖包1.2、controller层代码(以查询user表数据为列导出excel)1.3、service层代码(以查询user表数据为列导出excel)1.4、service实现层代码(以查询user表数据为列导出excel)1.5、实体对象代码(以查... 查看详情

html角度材料开始(代码片段)

查看详情

scss角度材料2主题(代码片段)

查看详情

markdownjhipster上的角度材料(代码片段)

查看详情

magicodes.ie之快速导出excel(代码片段)

...基于ASP.NETCore导出Excel,出于从框架的体验和易用性的角度,Magicodes.IE决定对Excel的导出进行独立封装,以便于大家更易于使用,开箱即用。注意:Magicodes.IE是从框架的易用性和体验的角度对Excel导出进行了封装... 查看详情

将数据库中的数据导出为excel表格——java学习笔记(代码片段)

...近我的项目增加了一个需求,需要将数据库中的数据导出到excel表格中,再下载下来。而生成Excel比较有名的框架有Apachepoi等,网络上介绍其使用方法的文章也很多,但是我今天使用的是阿里出的easyexcel框架,... 查看详情

用tableexcel导出excel数据(代码片段)

...,技术的难点在哪里。控制在50-100字内。这个技术是用于导出jqgrid表格数据为EXCEL文件。原因是因为tableExport.js插件很强大,很便利。技术难点:相关的资料比较少。2、技术详述描述你是如何实现和使用该技术的,要求配合代码和... 查看详情

sas的导入导出excel表格的实现(代码片段)

首先SAS可以使用手动来导入,导出但是这样对于每次操作都需要来手动操作,所以就使用了SAS中的宏来编写代码需求:1.首先是给定excel的文件路径,来生成一个数据集2.然后是对数据集中进行数据的处理3.最后是对处理好的数据集导出... 查看详情

数据库表结构转成设计书,powerdesigner表格导出为excel(代码片段)

数据库中的表导入到PowerDesigner中并转为excel文档1、打开PowerDesigner12,在菜单中按照如下方式进行操作  file->ReverseEngineer->DataBase  点击后,弹出NewPhysicalDataModel的对话框 2、在General选项卡中   Mode 查看详情

vue导出表格为excel(代码片段)

...ulid文件夹下的webpack.base.config.js中alias的声明为准。 //导出ExcelexportExcel()require.ensure([],()=>        constexport_json_to_excel=require(‘@/Excel/Export2Excel.js‘);  //引入文件      consttHeader=[‘创建时间‘,‘订单ID‘,.... 查看详情

poi导出excel保留原始格式(代码片段)

...需要保留原始类型代码改造如下:/***按照格式方案的配置导出数据*@paramformattor格式*@paramformatType格式化类型*@paramvalue原始数据*@paramcell当前单元格*/privatevoidformatData(Stringformattor,FormatTypeformatType,Stringvalu 查看详情

markdown角度-具有多输入场的材料形式(代码片段)

查看详情

powerdesigner表格导出为excel(代码片段)

选中tablesctrl+shift+x然后运行脚本‘******************************************************************************OptionExplicitDimrowsNumrowsNum=0‘------------------------------------------------------------- 查看详情

poi导出excel模版设置单元格为下拉框格式(代码片段)

日常开发中,导出基础数据为模版,填充信息后导入时,有时候会要求某些导入项应该为下拉框选择,一个是为了规范数据,也可以简化填充,下面上代码:publicstaticvoidsetColumnToDropDownBoxFormat(XSSFSheetshee... 查看详情

poi框架实战——poi导出excel时设置单元格类型为数值类型(代码片段)

...  最近做的一个ITFIN的项目中,后台需要用POI实现导出功能,导出的数据中有文本格式,也有货币格式,所以为了方便在将来导出的表格中做计算,存放货币的单元格需要设置为数值类型。  导出的Excel的... 查看详情

springboot整合jett实现模板excel数据导出(代码片段)

...素取名为e ,每个元素的又可以使用$e.属性来进行获取。导出数据:  二 jett的案例操作2.1模板案例2.2代码实现1.工程结构 2.代 查看详情

python此快速功能将excel文件中的所有工作簿导出为单独的csv,以使数据更易于使用。(代码片段)

查看详情