极客教程Angular PrimeNG表的数据导出
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将学习Angular PrimeNG表数据导出。
Angular PrimeNG Table用于以表格格式显示数据。数据导出让我们以pdf和excel的形式导出表格数据。该表也可以导出为其他格式。
语法:
exportExcel() {
import('xlsx').then((xlsx) => {
const worksheet = xlsx.utils.json_to_sheet(this.tutorials);
const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
const excelBuffer: any = xlsx.write(workbook, {
bookType: 'xlsx',
type: 'array',
});
this.saveAsExcelFile(excelBuffer, 'tutorials');
});
}
saveAsExcelFile(buffer: any, fileName: string): void {
let EXCEL_TYPE =
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
let EXCEL_EXTENSION = '.xlsx';
const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE,
});
FileSaver.saveAs(
data,
fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION
);
}
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new geeks_angular
第2步：在创建你的项目文件夹即geeks_angular之后，使用以下命令移动到它。
cd geeks_angular
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
npm install file-saver jspdf ispdf-autotable
Project Structure:
例子1：在下面的例子中，我们有一个带有Excel导出按钮的表。
- app.component.html:
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Data Export</h3>
<h5>Local Storage</h5>
<p-table #dt
[value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
stateStorage="local"
stateKey="gfg-local"
[globalFilterFields]="['title', 'category', 'rating']">
<ng-template pTemplate="caption">
<div class="flex">
<button type="button"
pButton pRipple
icon="pi pi-file-excel"
(click)="exportExcel()"
class="p-button-success mr-2"
pTooltip="XLS"
tooltipPosition="bottom">
</button>
Excel
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title
<p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category
<p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating
<p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-tutorial
let-rowIndex="rowIndex">
<tr class="p-selectable-row">
<td>
<p-tableCheckbox
[value]="tutorial"
[index]="rowIndex">
</p-tableCheckbox>
</td>
<td>
<span class="p-column-title">
Title
</span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title">
Category
</span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title">
Rating
</span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
- app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ProductService } from './productservice';
import { Table } from 'primeng/table';
import * as FileSaver from 'file-saver';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
constructor(private productService: ProductService) { }
cols: any[];
exportColumns: any[];
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 4
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 5
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 4
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 5
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 4
},
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 5
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 4
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 4
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 5,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 4
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 5
},
];
}
exportExcel() {
import('xlsx').then((xlsx) => {
const worksheet = xlsx.utils.json_to_sheet(this.tutorials);
const workbook = {
Sheets: { data: worksheet },
SheetNames: ['data']
};
const excelBuffer: any = xlsx.write(workbook, {
bookType: 'xlsx',
type: 'array',
});
this.saveAsExcelFile(excelBuffer, 'tutorials');
});
}
saveAsExcelFile(buffer: any, fileName: string): void {
let EXCEL_TYPE =
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
let EXCEL_EXTENSION = '.xlsx';
const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE,
});
FileSaver.saveAs(
data,
fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION
);
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
- app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
HttpClientModule,
FormsModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在下面的例子中，我们可以导出为PDF。
- app.component.html
<h1 style="color:green;text-align:center;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Table Data Export</h3>
<h5>Local Storage</h5>
<p-table #dt
[value]="tutorials"
dataKey="title"
[rowHover]="true"
[showCurrentPageReport]="true"
[filterDelay]="0"
[globalFilterFields]="['title', 'category', 'rating']">
<ng-template pTemplate="caption">
<div class="flex">
<button type="button"
pButton pRipple
icon="pi pi-file-pdf"
(click)="exportPdf()"
class="p-button-success mr-2"
pTooltip="PDF"
tooltipPosition="bottom">
</button>PDF
</div>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem"></th>
<th pSortableColumn="title">
Title
<p-sortIcon field="title"></p-sortIcon>
</th>
<th pSortableColumn="category">
Category
<p-sortIcon field="category"></p-sortIcon>
</th>
<th pSortableColumn="rating">
Rating
<p-sortIcon field="rating"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-tutorial
let-rowIndex="rowIndex">
<tr class="p-selectable-row">
<td>
<p-tableCheckbox
[value]="tutorial"
[index]="rowIndex">
</p-tableCheckbox>
</td>
<td>
<span class="p-column-title">
Title
</span>
{{ tutorial.title }}
</td>
<td>
<span class="p-column-title">
Category
</span>
<span class="image-text">
{{ tutorial.category }}
</span>
</td>
<td>
<span class="p-column-title">
Rating
</span>
<span class="image-text">
{{ tutorial.rating }}
</span>
</td>
</tr>
</ng-template>
</p-table>
- app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { ProductService } from './productservice';
import { Table } from 'primeng/table';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
tutorials: Tutorial[];
@ViewChild('dt') table: Table;
constructor(private productService: ProductService) { }
cols: any[];
exportColumns: any[];
ngOnInit() {
this.tutorials = [
{
title: 'Queue',
category: 'Data Structure',
rating: 4
},
{
title: 'Circularly LinkedList',
category: 'Data Structure',
rating: 5
},
{
title: 'Doubly LinkedList',
category: 'Data Structure',
rating: 3
},
{
title: 'Singly LinkedList',
category: 'Data Structure',
rating: 4
},
{
title: 'Doubly Ended Queue',
category: 'Data Structure',
rating: 5
},
{
title: 'Binary Search Tree',
category: 'Data Structure',
rating: 4
,
{
title: 'Red Black Tree',
category: 'Data Structure',
rating: 5
},
{
title: 'Breadth First Search',
category: 'Graph',
rating: 4
},
{
title: "Floyd's Cycle",
category: 'Algorithm',
rating: 4
},
{
title: 'Travelling Salesman Problem',
category: 'Algorithm',
rating: 5,
},
{
title: 'Bellman Ford',
category: 'Graph',
rating: 4
},
{
title: 'KMP Algorithm',
category: 'String',
rating: 5
},
];
}
exportPdf() {
const doc = new jsPDF('l', 'mm', 'a4');
const head = [['Title', 'Category', 'Rating']];
autoTable(doc, {
head: head,
body: this.toPdfFormat(),
didDrawCell: (data) => { },
});
doc.save('tutorials.pdf');
}
toPdfFormat() {
let data = [];
for (var i = 0; i < this.tutorials.length; i++) {
data.push([
this.tutorials[i].title,
this.tutorials[i].category,
this.tutorials[i].rating,
]);
}
return data;
}
}
export interface Tutorial {
title?: string;
category?: string;
rating?: number;
}
- app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ProductService } from "./productservice";
import { TableModule } from "primeng/table";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
HttpClientModule,
FormsModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ProductService]
})
export class AppModule { }
输出:
