How can I help you?
PDF export in Angular Pivotview component
24 Apr 202624 minutes to read
The Angular Pivot Table allows exporting pivot table data as a PDF document. To enable PDF export, inject the PDFExportService into the Pivot Table and set the allowPdfExport property to true. Once enabled, use the pdfExport method to generate and download the PDF file.
In the following example, an external button is used to start the PDF export process. When the user clicks the button, the pdfExport method is called so that the Pivot Table data can be saved as a PDF file.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView, PDFExportService } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Multiple Pivot Table exporting
Multiple Pivot Tables can be exported to the same or different pages in a single PDF file for easy comparison. Each Pivot Table requires a unique HTML element ID, such as PivotTable1 and PivotTable2. To export multiple Pivot Tables, provide their IDs in the pivotTableIds property of the pdfExportProperties, then pass the configured pdfExportProperties to the pdfExport method with isMultipleExport set to true to enable multiple Pivot Table export mode.
Note: PivotView PDF export uses Grid’s PdfExportProperties model for configuration.
Same page
To export multiple Pivot Tables on the same page, set the multipleExport.type property to AppendToPage in pdfExportProperties. Blank space between the Pivot Tables can be added by using the multipleExport.blankSpace property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, PdfExportProperties } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { salesData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
selector: 'app-container',
styleUrls: ['./app.component.css'],
template: `<div class="col-md-8">
<div id='PivotTable1Container' class='pivot-container'>
<ejs-pivotview #PivotTable1 id='PivotTable1' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' [width]=width></ejs-pivotview>
</div>
<div id='PivotTable2Container' class='pivot-container'>
<ejs-pivotview #PivotTable2 id='PivotTable2' [dataSourceSettings]=dataSourceSettings1 allowPdfExport='true' [width]=width></ejs-pivotview>
</div>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width?: string;
public dataSourceSettings?: DataSourceSettingsModel;
public dataSourceSettings1?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('PivotTable1', { static: false })
public pivotGridObj?: PivotView;
@ViewChild('PivotTable2')
public pivotGridObj1?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: salesData as IDataSet[],
expandAll: false,
rows: [{ name: 'Region', caption: 'Region' }],
columns: [{ name: 'Product', caption: 'Product' }],
values: [
{ name: 'Sales', caption: 'Q4 Sales' },
{ name: 'ProfitMargin', caption: 'Profit Margin' }
],
formatSettings: [
{ name: 'Sales', format: 'C0' },
{ name: 'ProfitMargin', format: '0\'%\'' }
],
filterSettings: [{ name: 'Product', items: ['Laptop'], type: 'Include' }]
};
this.dataSourceSettings1 = {
dataSource: salesData as IDataSet[],
expandAll: false,
rows: [{ name: 'Region', caption: 'Region' }],
columns: [{ name: 'Product', caption: 'Product' }],
values: [
{ name: 'Units', caption: 'Units Sold' },
{ name: 'Sales', caption: 'Q4 Sales' }
],
formatSettings: [
{ name: 'ProfitMargin', format: '0\'%\'' },
{ name: 'Sales', format: 'C0' }
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
const pdfExportProperties: PdfExportProperties = {
multipleExport: { type: 'AppendToPage', blankSpace: 100 },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
this.pivotGridObj1?.pdfExport(pdfExportProperties, true);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));New page
To export each Pivot Table on a separate page, set the multipleExport.type property to NewPage in pdfExportProperties.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, PdfExportProperties } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { salesData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
selector: 'app-container',
styleUrls: ['./app.component.css'],
template: `<div class="col-md-8">
<div id='PivotTable1Container' class='pivot-container'>
<ejs-pivotview #PivotTable1 id='PivotTable1' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' [width]=width></ejs-pivotview>
</div>
<div id='PivotTable2Container' class='pivot-container'>
<ejs-pivotview #PivotTable2 id='PivotTable2' [dataSourceSettings]=dataSourceSettings1 allowPdfExport='true' [width]=width></ejs-pivotview>
</div>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width?: string;
public dataSourceSettings?: DataSourceSettingsModel;
public dataSourceSettings1?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('PivotTable1', { static: false })
public pivotGridObj?: PivotView;
@ViewChild('PivotTable2')
public pivotGridObj1?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: salesData as IDataSet[],
expandAll: false,
rows: [{ name: 'Region', caption: 'Region' }],
columns: [{ name: 'Product', caption: 'Product' }],
values: [
{ name: 'Sales', caption: 'Q4 Sales' },
{ name: 'ProfitMargin', caption: 'Profit Margin' }
],
formatSettings: [
{ name: 'Sales', format: 'C0' },
{ name: 'ProfitMargin', format: '0\'%\'' }
],
filterSettings: [{ name: 'Product', items: ['Laptop'], type: 'Include' }]
};
this.dataSourceSettings1 = {
dataSource: salesData as IDataSet[],
expandAll: false,
rows: [{ name: 'Region', caption: 'Region' }],
columns: [{ name: 'Product', caption: 'Product' }],
values: [
{ name: 'Units', caption: 'Units Sold' },
{ name: 'Sales', caption: 'Q4 Sales' }
],
formatSettings: [
{ name: 'ProfitMargin', format: '0\'%\'' },
{ name: 'Sales', format: 'C0' }
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
const pdfExportProperties: PdfExportProperties = {
multipleExport: { type: 'NewPage' },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
this.pivotGridObj1?.pdfExport(pdfExportProperties, true);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Export table and chart into the same document
If you want to export both the table and the chart from the Pivot Table into a single PDF file, set the displayOption property to Both. Then, when you use the pdfExport method, make sure to set the exportBothTableAndChart option to true. This will include both the data table and its chart in one PDF document when you export.
The following example shows how you can set this up in your application:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView, PDFExportService, DisplayOption } from '@syncfusion/ej2-angular-pivotview';
import { ChartSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [PDFExportService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
[displayOption]='displayOption' [chartSettings]='chartSettings' [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?: DataSourceSettingsModel;
public displayOption?: DisplayOption;
public chartSettings?: ChartSettings;
public button?: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
values: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.displayOption = { view: 'Both' } as DisplayOption;
this.chartSettings = { chartSeries: { type: 'Column' }} as ChartSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport(undefined, false, undefined, false, true);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Customization during PDF export
PDF export provides option to customize mapping of pivot table to the exported PDF document.
To add header and footer while exporting
When exporting data from the Pivot Table to a PDF document, you can include additional information in the header or footer. You can add text, lines, page numbers, or images to ensure your exported document includes important details, such as your organization’s name or branding, and to improve readability.
To do this, you can use the header or footer options in the PdfExportProperties. These options allow you to specify what content to display at the top or bottom of each PDF page when exporting.
To add a text in header/footer
You can include custom text in the header or footer of the exported PDF document. Set the type property to Text in the contents array to add text. The following example shows how to add the text “Northwind Traders” to the header:
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Text',
value: "Northwind Traders",
position: { x: 0, y: 50 },
style: { textBrushColor: '#000000', fontSize: 13 }
}
]
}
}To draw a line in header/footer
You can draw lines in the header or footer to create visual separators or decorative elements. Set the type property to Line in the contents array to add line elements. The line can be styled with different dash patterns and colors.
Supported line styles:
-
solid- Continuous line -
dash- Dashed line -
dot- Dotted line -
dashdot- Alternating dash and dot pattern -
dashdotdot- Dash followed by two dots pattern
The following example demonstrates how to add a solid line in the header:
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 }
}
]
}
}Add page number in header/footer
You can display page numbers in the header or footer using various numbering formats. Set the type property to PageNumber in the contents array to add page number elements. This helps users navigate through multi-page PDF documents easily.
Supported page number types:
-
LowerLatin- Lowercase letters (a, b, c) -
UpperLatin- Uppercase letters (A, B, C) -
LowerRoman- Lowercase Roman numerals (i, ii, iii) -
UpperRoman- Uppercase Roman numerals (I, II, III) -
Arabic- Numbers (1, 2, 3)
The following example shows how to add page numbers with Arabic format in the header:
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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Add an image in header/footer
You can include images in the header or footer by providing a Base64 encoded string. Set the type property to Image in the contents array to add image elements. This allows you to add logos, watermarks, or other visual elements to your PDF documents.
The following example demonstrates how to add an image to the header:
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 20, y: 10 },
size: { height: 100, width: 100 },
}
]
}
}The below code illustrates the PDF export customization options.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { image } from './image';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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: 'Image',
src: image,
position: { x: 20, y: 10 },
size: { height: 100, width: 100 },
}
]
}
};
this.pivotGridObj?.pdfExport(this.pdfExportProperties);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing the file name while exporting
The PDF export provides an option to change the file name of the document before exporting. To change the file name, define the fileName property in the pdfExportProperties object and pass it as a parameter to the pdfExport method.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing page orientation while exporting
When exporting the Pivot Table as a PDF, users can choose the page orientation of the document. By default, the PDF is exported in Portrait orientation. If you want to change the orientation to Landscape, set the pageOrientation property in the pdfExportProperties object. Then, pass this object as a parameter to the pdfExport method. This lets you select either Portrait or Landscape orientation based on your needs before saving the exported PDF.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing page size while exporting
When exporting Pivot Table data to PDF, users can select a specific page size for the PDF document. To set the page size, define the pageSize property within the pdfExportProperties object, and pass this object as a parameter to the pdfExport method.
You can choose from various page sizes, such as 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, and Ledger.
This option lets users easily adjust the PDF layout to fit their specific needs before exporting the data from the Pivot Table.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing document width and height while exporting
You can adjust the size of the exported PDF document by setting the height and width options in the beforeExport event. This allows you to specify the dimensions of the PDF before creating it.
Note: This option is available only when
enableVirtualizationis set to true. Also, make sure that both theVirtualScrollServiceandPDFExportServicemodules are added to the Pivot Table.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView, VirtualScrollService, PDFExportService, BeforeExportEventArgs } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [PDFExportService,VirtualScrollService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
enableVirtualization='true' (beforeExport)='beforeExport($event)' [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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
beforeExport(args: BeforeExportEventArgs) {
args.width = this.pivotGridObj?.element.offsetWidth;
args.height = this.pivotGridObj?.element.offsetHeight;
}
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
values: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Customize the table column count while exporting
Users can control how many Pivot Table columns appear on each page of the exported PDF by setting the columnSize option in the beforeExport event. This allows users to split Pivot Table columns across multiple pages when exporting large tables to PDF, making the output easier to read.
Note: This option works only when
enableVirtualizationis enabled in the Pivot Table settings. Also, make sure that bothVirtualScrollServiceandPDFExportServicemodules are injected into the Pivot Table.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, VirtualScrollService, PDFExportService, BeforeExportEventArgs, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [PDFExportService,VirtualScrollService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
enableVirtualization='true' (beforeExport)='beforeExport($event)' [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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
beforeExport(args: BeforeExportEventArgs) {
args.columnSize = 6;
}
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
values: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing the table’s column width and row height while exporting
The column width and row height in the PDF document can be adjusted when exporting data from the Pivot Table by handling the pdfHeaderQueryCellInfo and pdfQueryCellInfo events. These changes apply only to the exported PDF and do not affect the on-screen Pivot Table display.
Adjusting column width
To set the width of specific columns during export, use the pdfHeaderQueryCellInfo event. This event triggers for each header cell during PDF export. Check if the current header cell matches the target column by comparing the level name using args.gridCell.valueSort.levelName, which contains the exact row and column level name of the current cell. If it matches, use the column index (args.gridCell.colIndex) to locate the column in the pdfGrid columns collection, which holds the current PDF grid and allows adjustment of specific column widths during export. Then set the width property with the desired value in points.
For example, the “Units Sold” column under “FY 2015” can be set to a width of 250 points:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, VirtualScrollService, PDFExportService, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [PDFExportService, VirtualScrollService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
enableVirtualization='true' [width]=width [gridSettings]='gridSettings'></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?: DataSourceSettingsModel;
public button?: Button;
public gridSettings?: GridSettings;
public observable = new Observable();
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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: [],
};
this.gridSettings = {
columnWidth: 140,
pdfHeaderQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.gridCell && args.gridCell.valueSort && args.gridCell.valueSort.levelName === 'FY 2015.Units Sold'
&& args.cell && args.cell.row && args.cell.row.pdfGrid && args.cell.row.pdfGrid.gridColumns
&& args.cell.row.pdfGrid.gridColumns.columns[args.gridCell.colIndex]) {
args.cell.row.pdfGrid.gridColumns.columns[args.gridCell.colIndex].width = 250;
}
}) as any,
} as GridSettings;
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Adjusting row height
To change the height of a particular row in the PDF document, use the pdfQueryCellInfo event. Check if the current row matches the target row by comparing the row headers using args.data.rowHeaders, which holds the string value of the row header level names. If it matches, set the args.cell.gridRow.height property with the desired value in points.
For example, the “Mountain Bikes” row under “France” can be set to a height of 100 points:
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, VirtualScrollService, PDFExportService, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [PDFExportService, VirtualScrollService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true'
enableVirtualization='true' [width]=width [gridSettings]='gridSettings'></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?: DataSourceSettingsModel;
public button?: Button;
public gridSettings?: GridSettings;
public observable = new Observable();
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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,
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.data && args.data.rowHeaders === 'France.Bottles and Cages' && args.cell && args.cell.gridRow) {
args.cell.gridRow.height = 100;
}
}) as any,
} as GridSettings;
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Customize the pivot report during export
The Pivot Table report can be modified before exporting by applying filters, adding formatting, or performing drill operations. These modifications apply only to the Pivot Table exported to the PDF file and do not affect the Pivot Table displayed on the screen. To modify the export behavior, use the beforeExport event. This event is triggered right before the export operation begins.
In the following example, the beforeExport event is used to expand all Pivot Table headers by setting the expandAll property to true. The generateGridData method is then called to obtain the updated pivotValues. The updated pivotValues are assigned to args.dataCollections for the export. Finally, expandAll is set to false again to restore the original state of the Pivot Table.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, BeforeExportEventArgs } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width (beforeExport)='beforeExport($event)'></ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
beforeExport(args: BeforeExportEventArgs) {
// Store the drilledMembers here(row/column headers that has been expanded).
let member = this.pivotGridObj?.dataSourceSettings.drilledMembers;
// Then apply expandAll to the pivot table settings to get all the data including child members.
this.pivotGridObj?.setProperties(
{ dataSourceSettings: { expandAll: true, drilledMembers: [] } },
true
);
this.pivotGridObj?.engineModule.generateGridData(this.pivotGridObj.dataSourceSettings, true);
// Assign that retrieved data to the exporting here.
args.dataCollections = [(this.pivotGridObj as any).engineModule?.pivotValues];
// Then set false to expandAll and the stored members to the drilledMembers to the pivot table settings to get back to the normal state.
this.pivotGridObj?.setProperties(
{ dataSourceSettings: { expandAll: false, drilledMembers: member } },
true
);
}
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
enableSorting: true,
columns: [{ name: 'Year' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' },
],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
filters: []
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Exporting with row and column cells spanning
Exporting data from the Pivot Table with cell spanning preserves the row and column cell layout in the exported PDF. The pdfQueryCellInfo event allows customization of cell span properties during the PDF export process to match the Pivot Table UI layout.
In the pdfQueryCellInfo event, customize the following cell span properties:
-
args.cell.rowSpan- Defines the number of rows a cell should span in the exported PDF. -
args.cell.colSpan- Defines the number of columns a cell should span in the exported PDF.
In the following code example, the row and column spans are adjusted for empty cells in the Pivot Table and during PDF export.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width [gridSettings]='gridSettings'></ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public observable = new Observable();
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: pivotData as IDataSet[],
expandAll: true,
formatSettings: [{ name: 'Amount', format: 'C0' }],
columns: [{ name: 'Date', showNoDataItems: true }],
values: [{ name: 'Quantity' }, { name: 'Amount', caption: 'Sold Amount' }],
rows: [{ name: 'Country', showNoDataItems: true }, { name: 'State', showNoDataItems: true }],
filters: [],
emptyCellsTextContent: '**'
};
this.gridSettings = {
columnWidth: 140,
queryCellInfo: this.observable.subscribe((args: any) => {
const colIndex = Number(args.cell.getAttribute('aria-colindex'));
const currentCell = args.data[colIndex - 1];
if (currentCell.formattedText === '**' &&
currentCell.actualText === 'Quantity' &&
['Canada.New Mexico', 'United States.British Columbia'].includes(currentCell.rowHeaders)) {
args.rowSpan = 2;
args.colSpan = 2;
}
}) as any,
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.value === '**' &&
args.data.actualText === 'Quantity' &&
['Canada.New Mexico', 'United States.British Columbia'].includes(args.data.rowHeaders)) {
args.cell.rowSpan = 2;
args.cell.colSpan = 2;
}
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Exporting with hyperlinks and images
The Pivot Table allows adding hyperlinks and images to cells during PDF export. The pdfQueryCellInfo event handles row and value cells, while the pdfHeaderQueryCellInfo event handles header cells. Both events provide access to the hyperlink property to set URLs in cells and the image property to add images to cells.
PDF export supports base64 strings for exporting images.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, HyperlinkSettings } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { employeeData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width [gridSettings]='gridSettings' [cellTemplate]='cellTemplate' [hyperlinkSettings]='hyperlinkSettings'>
</ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public observable = new Observable();
public cellTemplate?: string;
public hyperlinkSettings?: HyperlinkSettings;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.cellTemplate = '${getCellContent(data)}'
this.dataSourceSettings = {
dataSource: employeeData as IDataSet[],
rows: [{ name: 'FirstName' }, { name: 'EmployeeID', caption: 'Employee Image' }],
columns: [{ name: 'Title' }],
values: [{ name: 'Salary' }, { name: 'OrdersCount' }],
filterSettings: [
{ name: 'Title', type: 'Include', items: ['Sales Representative'] }
],
expandAll: true,
showSubTotals: false,
showRowGrandTotals: false
};
this.hyperlinkSettings = {
showRowHeaderHyperlink: true,
cssClass: 'e-custom-class'
} as HyperlinkSettings;
this.gridSettings = {
columnWidth: 140,
layout: 'Tabular',
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.data && args.data.axis === 'row') {
if (args.data.valueSort && args.data.valueSort.axis === 'FirstName') {
const firstName: any = args.data.actualText;
const employee: any = employeeData.find((emp: any) => emp.FirstName === firstName);
if (employee && employee.EmailID) {
args.hyperLink = {
target: 'mailto:' + employee.EmailID,
displayText: args.value
};
}
}
if (args.data.valueSort && args.data.valueSort.axis === 'EmployeeID') {
const employeeId: any = Number(args.data.actualText);
const employee: any = employeeData.find((emp: any) => emp.EmployeeID === employeeId);
if (employee && employee.EmployeeImage) {
args.image = {
base64: employee.EmployeeImage,
height: 57.5,
width: 57.5
};
}
}
}
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
(<{ getCellContent?: Function }>window).getCellContent = (args: any): any => {
if (args.cellInfo && args.cellInfo.axis === 'row' && args.cellInfo.valueSort.axis === 'EmployeeID') {
let employeeId: number = Number(args.cellInfo.actualText);
// eslint-disable-next-line @typescript-eslint/tslint/config
let employee: { [key: string]: Object; } | any = employeeData.find(function (emp: any) { return emp.EmployeeID === employeeId; });
if (employee && employee.EmployeeImage) {
let imgSrc: string = 'data:image/png;base64,' + employee.EmployeeImage;
return '<div class="image"><img class="university-logo" src="' + imgSrc + '" width="87" height="87" alt="' + (employee.EmployeeID || '') + '" onload="handleImageLoad(this)"/></div>';
}
}
return '';
};
(<{ handleImageLoad?: Function }>window).handleImageLoad = (imgElement: any): void => {
try {
const cell: HTMLElement = imgElement.closest('th, td');
if (cell) {
const cellValue: HTMLElement | any = cell.querySelector('.e-cellvalue');
if (cellValue) {
cellValue.style.display = 'none';
}
}
} catch (error) {
console.warn('Error handling image load:', error);
}
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Exporting with custom aggregates
The Pivot Table supports exporting data with custom calculations beyond the default options such as Sum, Count, or Average. Custom aggregates allow for advanced analytical scenarios where standard calculations are not sufficient.
To export with custom aggregates, follow these steps:
- Define custom aggregate names using the localization option. These names appear in the Pivot Table’s aggregation menu.
- Add custom aggregation types to the aggregate menu during Pivot Table initialization using the
dataBoundevent. - Use the
aggregateCellInfoevent to define the calculation logic for each custom type. This event triggers for every aggregate cell, allowing custom calculations to be applied. - Once the calculations are defined, call the
pdfExportmethod to export the Pivot Table with all custom aggregations applied.
For more information about adding custom aggregation types, see the custom aggregation documentation.
The following example shows how to add two custom aggregate types to the aggregate menu: CustomAggregateType 1, which calculates a weighted average, and CustomAggregateType 2, which calculates the percentage of the total.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, AggregateTypes, FieldListService, SummaryTypes } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { L10n } from '@syncfusion/ej2-base';
let SummaryType: string[] = [
'Sum',
'Count',
'DistinctCount',
'Avg',
'CustomAggregateType1',
'CustomAggregateType2',
];
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width (aggregateCellInfo)='aggregateCellInfo($event)'
showFieldList='true' (dataBound)="dataBound()">
</ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService, FieldListService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
aggregateCellInfo(args: any) {
if (args.aggregateType === 'CustomAggregateType1') {
args.value = args.value * 100;
}
if (args.aggregateType === 'CustomAggregateType2') {
args.value = args.value / 100;
}
}
dataBound(): void {
(this.pivotGridObj as any).getAllSummaryType = function () {
return SummaryType as AggregateTypes[];
};
(this.pivotGridObj as any).pivotFieldListModule.aggregateTypes = SummaryType as AggregateTypes[];
(this.pivotGridObj as any).pivotFieldListModule.getAllSummaryType = function () {
return SummaryType as AggregateTypes[];
};
}
ngOnInit(): void {
L10n.load({
'en-US': {
pivotview: {
CustomAggregateType1: 'Custom Aggregate Type 1',
CustomAggregateType2: 'Custom Aggregate Type 2',
},
pivotfieldlist: {
CustomAggregateType1: 'Custom Aggregate Type 1',
CustomAggregateType2: 'Custom Aggregate Type 2',
}
}
});
this.dataSourceSettings = {
dataSource: pivotData as IDataSet[],
columns: [{ name: 'Year' }],
values: [{ name: 'Sold', type: 'CustomAggregateType1' as SummaryTypes }, { name: 'Amount', type: 'CustomAggregateType2' as SummaryTypes }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Exporting with custom date format
The Pivot Table component allows applying custom date formatting to date-type fields added to the row and column axes. This formatting maintains consistency between the rendered pivot table and the exported PDF file. Configure custom date formatting through the formatSettings property by following these steps:
- Set the
nameproperty to the target date field. - Set the
typeproperty to date to identify the field as a date type. - Set the
formatproperty to the desired date format pattern (for example,"EEE, MMM d, ''yy").
After configuration, call the pdfExport method to export the Pivot Table with the applied formatting.
The following example demonstrates exporting a Pivot Table with a custom date format. The date field uses the pattern "EEE, MMM d, ''yy" to display dates in the format: weekday abbreviation, month abbreviation, day, and two-digit year (for example, Sun, May 8, ‘23).
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, FieldListService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Group_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width showFieldList='true'>
</ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService, FieldListService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Group_Data as IDataSet[],
expandAll: false,
enableSorting: true,
formatSettings: [{ name: 'Date', type: 'date', format: "EEE, MMM d, ''yy" }],
rows: [{ name: 'Date' }],
columns: [{ name: 'Product_Categories', caption: 'Product Categories' }],
values: [{ name: 'Sold', caption: 'Unit Sold' },
{ name: 'Amount', caption: 'Sold Amount' }],
};
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing the pivot table style while exporting
When you export the Pivot Table as a PDF document, you can change the colors used for headers, captions, and records. To do this, use the theme property inside the pdfExportProperties object. Pass this object to the pdfExport method. This allows you to adjust how the Pivot Table looks in the exported PDF.
By default, the Material theme is applied to the exported PDF document.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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
}
}
} as PdfExportProperties;
this.pivotGridObj?.pdfExport(this.pdfExportProperties);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Changing default font while exporting
By default, the Pivot Table uses the “Helvetica” font in the exported PDF. You can change this font by setting the theme property in pdfExportProperties. The available built-in font options are:
- Helvetica
- TimesRoman
- Courier
- Symbol
- ZapfDingbats
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) }
}
};Adding custom font while exporting
You can also use custom fonts when exporting if you need support for languages or styles that are not available in the built-in fonts. The custom font should be in Base64 format and applied using the PdfTrueTypeFont class. In the example below, the Advent Pro font is used, which supports the Hungarian language.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data, base64AlgeriaFont } from './datasource';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
public pdfExportProperties?: PdfExportProperties;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Non-English alphabets can also be exported correctly when you specify a suitable font.
Apply custom styles based on specific conditions
When exporting Pivot Table data to PDF, custom styles can be applied to cells based on their values or other criteria. To apply custom styles, use the pdfQueryCellInfo event. In this event, the cell information can be accessed through the args.data property, and its style properties, such as backgroundColor, fontFamily, and textPenColor, can be customized. These changes apply only to the exported PDF and do not affect the on-screen Pivot Table display
The following example demonstrates how to apply conditional formatting to the Sold field values in the exported PDF document. Values below 700 units are highlighted in red, while values of 700 units or more are highlighted in green.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width [gridSettings]='gridSettings'></ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public observable = new Observable();
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: pivotData as IDataSet[],
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' }],
};
this.gridSettings = {
columnWidth: 140,
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.data && args.data.actualText === 'Sold') {
if ((args as any).value < 700) {
args.style = {
backgroundColor: '#df3800',
fontFamily: 'Courier',
textPenColor: '#FFFFFF'
};
} else {
args.style = {
backgroundColor: '#00A45A',
fontFamily: 'TimesRoman',
textPenColor: '#FFFFFF'
};
}
}
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Enabling horizontal overflow
The Pivot Table component supports exporting all columns on a single page in the exported PDF document, even if the number of columns exceeds the maximum page limits. This functionality ensures readability and comprehensiveness of the exported PDF. To enable this option, set the allowHorizontalOverflow property in the pdfExportProperties object to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, PdfExportProperties } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width [gridSettings]='gridSettings'></ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: pivotData as IDataSet[],
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' }],
};
this.gridSettings = {
columnWidth: 140,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
let pdfExportProperties: PdfExportProperties = {
allowHorizontalOverflow: true
};
this.pivotGridObj?.pdfExport(pdfExportProperties);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Export only the current page
By default, the Pivot Table exports all data records. When working with large datasets, this can result in larger file sizes. To optimize file size and performance, only the data records currently visible in the viewport can be exported by setting the exportAllPages property to false.
This option is applicable only when the virtualization or paging functionality is enabled.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView, VirtualScrollService, PDFExportService } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [VirtualScrollService, PDFExportService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' [exportAllPages]='false' enableVirtualization='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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
values: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Repeat row headers
By default, row headers are repeated on each page when exporting the Pivot Table as a PDF. This allows easy identification of rows in larger tables that extend across multiple pages. To turn off repeated row headers, set the allowRepeatHeader property to false within the beforeExport event.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
beforeExport(args: any) {
debugger
args.allowRepeatHeader = false;
}
ngOnInit(): void {
this.width = "100%";
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Repeat column headers on every page
By default, column headers are repeated on each page when exporting the Pivot Table as a PDF. This ensures consistent column identification across multi-page documents. To prevent column headers from repeating on each page, use the pdfQueryCellInfo event. In this event, access the pdfGrid object through args.cell.row.pdfGrid, which holds the current PDF grid and allows component over the repeat header behavior. Then set its repeatHeader property to false to disable the repetition.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, PdfExportProperties } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Observable } from 'rxjs';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotTable' height='350' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width [gridSettings]='gridSettings'></ejs-pivotview>
</div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService],
})
export class AppComponent implements OnInit {
public width?: string;
public button?: Button;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public observable = new Observable();
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: pivotData as IDataSet[],
expandAll: true,
drilledMembers: [{ name: 'Year', items: ['FY 2015'] }],
columns: [{ name: 'Year', caption: 'Production Year' }],
rows: [{ name: 'Country' }, { name: 'Products' }, { name: 'Quarter' }],
values: [{ name: 'Sold', caption: 'Units Sold' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.gridSettings = {
columnWidth: 140,
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
args.cell.row.pdfGrid.repeatHeader = false;
}
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Show spinner during export
When exporting data, displaying a spinner provides visual feedback to users that the export process is in progress. To show a spinner, invoke the showWaitingPopup method in the button’s click event before calling the pdfExport method. After the export is complete, use the exportComplete event to trigger the hideWaitingPopup method, which hides the spinner and indicates that the export has finished.
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService, VirtualScrollService, ExportCompleteEventArgs } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' enableVirtualization='true' [dataSourceSettings]=dataSourceSettings
allowPdfExport='true' [width]=width (exportComplete)='exportComplete($event)'></ejs-pivotview></div>
<div class="col-md-2"><button ej-button id='export'>Export</button></div>`,
providers: [PDFExportService, VirtualScrollService],
})
export class AppComponent implements OnInit {
public width?: string;
public dataSourceSettings?: DataSourceSettingsModel;
public button?: Button;
public customername: string[] = ['TOM', 'Hawk', 'Jon', 'Chandler', 'Monica', 'Rachel', 'Phoebe', 'Gunther',
'Ross', 'Geller', 'Joey', 'Bing', 'Tribbiani', 'Janice', 'Bong', 'Perk', 'Green', 'Ken', 'Adams'];
public city: string[] = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'Austin',
'San Francisco', 'Columbus', 'Washington', 'Portland', 'Oklahoma', 'Las Vegas', 'Virginia', 'St. Louis', 'Birmingham'];
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
exportComplete(args: ExportCompleteEventArgs | any): void {
this.pivotGridObj?.hideWaitingPopup();
}
data(count: number): Object[] {
let result: Object[] = [];
let dt: number = 0;
for (let i: number = 1; i < (count + 1); i++) {
dt++;
let round: string;
let toString: string = i.toString();
if (toString.length === 1) {
round = '0000' + (i);
}
else if (toString.length === 2) {
round = '000' + i;
}
else if (toString.length === 3) {
round = '00' + i;
} else if (toString.length === 4) {
round = '0' + i;
} else {
round = toString;
}
result.push({
ProductID: 'PRO-' + round,
City: this.city[Math.round(Math.random() * this.city.length)] || this.city[0],
Year: "FY " + (dt + 2023),
CustomerName: this.customername[Math.round(Math.random() * this.customername.length)] || this.customername[0],
Price: Math.round(Math.random() * 5000) + 5000,
Sold: Math.round(Math.random() * 80) + 10,
});
if (dt / 2 == 1) {
dt = 0;
}
}
return result;
};
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: this.data(10000) as IDataSet[],
enableSorting: false,
expandAll: true,
formatSettings: [{ name: 'Price', format: 'C0' }],
rows: [{ name: 'ProductID' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.showWaitingPopup();
setTimeout(() => {
this.pivotGridObj?.pdfExport();
});
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Events
PdfQueryCellInfo
The pdfQueryCellInfo event occurs for each row and value cell while exporting the Pivot Table to a PDF. This event allows users to change the value, appearance, or other details of the current cell in the PDF file. The following parameters are available in this event:
-
value: The content displayed in the cell. -
column: The column information for the current cell. -
data: The complete row data for the cell. -
style: The style properties that control how the cell looks in the PDF.
By using this event, users can easily update the cell text, apply different styles such as font or background color, or adjust other settings as needed during PDF export.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { Observable } from 'rxjs';
import { Button } from '@syncfusion/ej2-buttons';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
providers: [PDFExportService],
standalone: true,
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
[gridSettings]='gridSettings' [width]=width allowPdfExport='true'></ejs-pivotview><div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width?: string;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public columnGrandTotalIndex: any;
public rowGrandTotalIndex: any;
public observable = new Observable();
public button?: Button;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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,
pdfQueryCellInfo: this.observable.subscribe((args: any) => {
//triggers for every cell while exporting
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));PdfHeaderQueryCellInfo
The pdfHeaderQueryCellInfo event is triggered for each column header cell when exporting the Pivot Table to a PDF document. This event allows users to easily change values or apply styles to the column header cells in the exported PDF file.
The event provides the following parameters:
-
cell: Gives information about the current header cell being exported. -
style: Contains style properties that can be used to format the cell.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, PDFExportService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { Observable } from 'rxjs';
import { Button } from '@syncfusion/ej2-buttons';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
providers: [PDFExportService],
selector: 'app-container',
// specifies the template string for the pivot table component
template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
[gridSettings]='gridSettings' [width]=width allowPdfExport='true'></ejs-pivotview><div class="col-md-2"><button ej-button id='export'>Export</button></div>`
})
export class AppComponent implements OnInit {
public width?: string;
public dataSourceSettings?: DataSourceSettingsModel;
public gridSettings?: GridSettings;
public columnGrandTotalIndex?: number;
public rowGrandTotalIndex?: number;
public observable = new Observable();
public button?: Button;
@ViewChild('pivotview', { static: false })
public pivotGridObj?: PivotView;
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
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,
pdfHeaderQueryCellInfo: this.observable.subscribe((args: any) => {
//triggers for every cell while exporting
}) as any,
} as GridSettings;
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
this.pivotGridObj?.pdfExport();
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));ExportComplete
The exportComplete event is triggered after the Pivot Table data has been successfully exported to a PDF document. This event allows you to access blob stream data for further processing by setting the isBlob parameter to true when calling the pdfExport method.
The event provides the following parameters:
-
type- Specifies the current export type, such as PDF, Excel, or CSV. -
promise- Contains the promise object that resolves with blob data.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataSet, PivotView, VirtualScrollService, ExportCompleteEventArgs, PDFExportService } from '@syncfusion/ej2-angular-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
@Component({
imports: [
PivotViewAllModule,
PivotFieldListAllModule
],
standalone: true,
selector: 'app-container',
providers: [VirtualScrollService, PDFExportService],
template: `<div class="col-md-8">
<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings allowPdfExport='true' enableVirtualization='true' (exportComplete)='exportComplete($event)' [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?: DataSourceSettingsModel;
public button?: Button;
@ViewChild('pivotview', {static: false})
public pivotGridObj?: PivotView;
exportComplete(args: ExportCompleteEventArgs | any): void {
args.promise.then((e: { blobData: Blob }) => {
console.log(e.blobData);
});
}
ngOnInit(): void {
this.dataSourceSettings = {
dataSource: Pivot_Data as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
values: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
};
this.width = '100%';
this.button = new Button({ isPrimary: true });
this.button.appendTo('#export');
this.button.element.onclick = (): void => {
let pdfExportProperties: PdfExportProperties = { };
this.pivotGridObj?.pdfExport(pdfExportProperties, false, undefined, true);
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));