PDF export allows exporting pivot table data as PDF document. To enable PDF export in the pivot table, set the allowPdfExport
as true. You need to use the pdfExport
method for PDF exporting.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj.pdfExport();
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
PDF export provides an option for exporting multiple pivot tables to same file. In this exported document, each pivot table will be exported to new page of document in same file.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview>
<ejs-pivotview #pivotview1 id='PivotView1' [dataSourceSettings]=dataSourceSettings1 allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public dataSourceSettings1: IDataOptions;
public button: Button;
public firstGridPdfExport: Promise<Object>;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
@ViewChild('pivotview1')
public pivotGridObj1: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.dataSourceSettings1 = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.firstGridPdfExport = this.pivotGridObj.grid.pdfExport({}, true);
this.firstGridPdfExport.then((pdfData: Object) => {
this.pivotGridObj1.pdfExport({}, false, pdfData);
});
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
PDF export provides option to customize mapping of pivot table to the exported PDF document.
You can customize text, page number, line, page size and changing orientation in header and footer.
You can add text either in header or footer of the exported PDF document like in the below code example.
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: "Northwind Traders",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 }
},
]
}
}
You can add line either in header or footer of the exported PDF document like in the below code example.
Supported line styles:
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Line',
style: { penColor: '#000080', penSize: 2, dashStyle: 'Solid' },
points: { x1: 0, y1: 4, x2: 685, y2: 4 }
}
]
}
}
You can add page number either in header or footer of exported PDF document like in the below code example.
Supported page number types:
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}', //optional
position: { x: 0, y: 25 },
style: { textBrushColor: '#ffff80', fontSize: 15, hAlign: 'Center' }
}
]
}
}
The below code illustrates the PDF export customization options.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: "Pivot Table",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13, dashStyle:'Solid',hAlign:'Center' }
}
]
},
footer: {
fromBottom: 160,
height: 150,
contents: [
{
type: 'PageNumber',
pageNumberType: 'Arabic',
format: 'Page {$current} of {$total}',
position: { x: 0, y: 25 },
style: { textBrushColor: '#02007a', fontSize: 15 }
}
]
}
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The PDF export provides an option to change file name of the document before exporting. In-order to change the file name, define fileName property in pdfExportProperties object and pass it as a parameter to the pdfExport
method.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
filename:'sample.pdf'
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The PDF export provides an option to change page orientation of the document before exporting. In-order to change the page orientation, define pageOrientation property in pdfExportProperties object and pass it as a parameter to the pdfExport
method. By default, the page orientation will be in Portrait and it can be changed to Landscape based on user requirement.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
pageOrientation: 'Landscape'
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The PDF export provides an option to change page size of the document before exporting. In-order to change the page size, define pageSize property in pdfExportProperties object and pass it as a parameter to the pdfExport
method.
Supported page sizes are: Letter, Note, Legal, A0, A1, A2, A3, A5, A6, A7, A8, A9, B0, B1, B2, B3, B4, B5, Archa, Archb, Archc, Archd, Arche, Flsa, HalfLetter, Letter11x17, Ledger.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
pageSize: 'Letter'
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The PDF export provides an option to change colors for headers, caption and records in pivot table before exporting. In-order to apply colors, define theme settings in pdfExportProperties object and pass it as a parameter to the pdfExport
method.
By default, material theme is applied to exported PDF document.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
theme: {
header: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true,
borders: { color: '#64FA50', lineStyle: 'Thin' }
},
record: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
},
caption: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
}
}
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
By default, the pivot table uses “Helvetica” font in the exported document. But it can be changed using the theme
property in pdfExportProperties
.
The available built-in fonts are,
import { PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf-export';
...
let pdfExportProperties: PdfExportProperties = {
theme: {
header: {font: new PdfStandardFont(PdfFontFamily.TimesRoman, 11, PdfFontStyle.Bold) },
caption: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 9) },
record: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 10) }
}
};
In addition to existing built-in fonts, custom fonts can also be used. The custom font should be in Base64 format and mention it in PdfTrueTypeFont class. In the following example, we have used Advent Pro font family that supports Hungarian language.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data, base64AlgeriaFont } from './datasource.ts';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
public pdfExportProperties: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
columns: [{ name: 'Year', caption: 'Production Year' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pdfExportProperties = {
theme: {
header: {font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
}
};
this.pivotGridObj.pdfExport(this.pdfExportProperties);
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The non-English alphabets can also be exported properly by setting its appropriate font.
You can export the pivot table virtual scroll data as PDF document by using PivotEngine export without any performance degradation. To enable PivotEngine export in the pivot table, set the allowPdfExport
as true. You need to use the exportToPDF
method for PivotEngine export.
To use PivotEngine export, You need to inject the
PDFExport
module in pivot table. PivotEngine export will be performed while enabling virtual scrolling by default
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj.pdfExportModule.exportToPDF();
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Repeat row headers on each page can be achieved using PivotEngine export option. To disable repeat row headers, you need to set allowRepeatHeader
to false in beforeExport event. You need to use the exportToPDF
method for PivotEngine export.
To use PivotEngine export, You need to inject the
PDFExport
module in pivot table. By default, repeat row headers is enabled in the PivotEngine export.
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' (beforeExport)='beforeExport($event)' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' width=width></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public button: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotView;
beforeExport(args: any) {
args.allowRepeatHeader = false;
}
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: [],
valueSortSettings: { headerText: 'FY 2015##Q1##Amount', headerDelimiter: '##', sortOrder: 'Descending' }
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj.pdfExportModule.exportToPDF();
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The event pdfQueryCellInfo
triggers on framing each row and value cell during PDF export. It allows the user to customize the cell value, style etc. of the current cell. It has the following parameters:
value
- It holds the cell value.column
- It holds column information for the current cell.data
- It holds the entire row data across the current cell.style
- It holds the style properties for the cell.import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
[gridSettings]='gridSettings' (enginePopulated)='enginePopulated($event)' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;
public columnGrandTotalIndex;
public rowGrandTotalIndex;
@ViewChild('pivotview', { static: false })
public pivotGridObj: PivotView;
pdfQueryCellInfo(args: any): void {
(this.pivotGridObj.renderModule as any).columnCellBoundEvent(args);
//triggers for every cell while exporting
}
enginePopulated(args: any): void {
this.pivotGridObj.grid.pdfQueryCellInfo = this.pdfQueryCellInfo.bind(this);
}
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
drilledMembers: [{ name: 'Country', items: ['France'] }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.gridSettings = {
columnWidth: 140,
} as GridSettings;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
The event pdfHeaderQueryCellInfo
triggers on framing each column header cell during PDF export. It allows the user to customize the cell value, style etc. of the current cell. It has the following parameters:
cell
- It holds the current rendering cell information.style
- It holds the style properties for the cell.import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';
@Component({
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
[gridSettings]='gridSettings' (enginePopulated)='enginePopulated($event)' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;
public columnGrandTotalIndex;
public rowGrandTotalIndex;
@ViewChild('pivotview', { static: false })
public pivotGridObj: PivotView;
pdfHeaderQueryCellInfo(args: any): void {
(this.pivotGridObj.renderModule as any).columnCellBoundEvent(args);
//triggers for every header cell while exporting
}
enginePopulated(args: any): void {
this.pivotGridObj.grid.pdfHeaderQueryCellInfo = this.pdfHeaderQueryCellInfo.bind(this);
}
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data,
expandAll: false,
drilledMembers: [{ name: 'Country', items: ['France'] }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.gridSettings = {
columnWidth: 140,
} as GridSettings;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }