How can I help you?
PDF export in EJ2 TypeScript Pivot Table component
7 Apr 202624 minutes to read
The Typescript Pivot Table allows exporting pivot table data as a PDF document. To enable PDF export, inject the PDFExport module 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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PdfExportProperties, FieldList, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { salesData } from './datasource.ts';
PivotView.Inject(FieldList, PDFExport);
let pivotTableObj: PivotView = new PivotView({
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' }]
},
width: '100%',
height: 300,
allowPdfExport: true,
showFieldList: true
});
pivotTableObj.appendTo('#PivotTable1');
let pivotTableObj2: PivotView = new PivotView({
dataSourceSettings: {
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' }]
},
width: '100%',
height: 300,
allowPdfExport: true,
showFieldList: true
});
pivotTableObj2.appendTo('#PivotTable2');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
const pdfExportProperties: PdfExportProperties = {
multipleExport: { type: 'AppendToPage', blankSpace: 100 },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport(pdfExportProperties, true);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable1'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>New page
To export each Pivot Table on a separate page, set the multipleExport.type property to NewPage in pdfExportProperties.
import { PivotView, IDataSet, PdfExportProperties, FieldList, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { salesData } from './datasource.ts';
PivotView.Inject(FieldList, PDFExport);
let pivotTableObj: PivotView = new PivotView({
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' }]
},
width: '100%',
height: 300,
allowPdfExport: true,
showFieldList: true
});
pivotTableObj.appendTo('#PivotTable1');
let pivotTableObj2: PivotView = new PivotView({
dataSourceSettings: {
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' }]
},
width: '100%',
height: 300,
allowPdfExport: true,
showFieldList: true
});
pivotTableObj2.appendTo('#PivotTable2');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
const pdfExportProperties: PdfExportProperties = {
multipleExport: { type: 'NewPage' },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport(pdfExportProperties, true);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable1'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
height: 320,
allowPdfExport: true,
displayOption: { view: 'Both', primary: 'Table' },
chartSettings: {
value: 'Amount', enableExport: true, chartSeries: { type: 'Column' }
},
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport(null, false, null, false, true);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: 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 }
}
]
}
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { image } from './image.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 20, y: 10 },
size: { height: 100, width: 100 },
}
]
}
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
fileName: 'sample.pdf'
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
pageOrientation: 'Landscape'
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
pageSize: 'Letter'
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 theVirtualScrollandPDFExportmodules are added to the Pivot Table.
import { PivotView, IDataSet, VirtualScroll, PDFExport, BeforeExportEventArgs} from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport, VirtualScroll);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
height: 320,
allowPdfExport: true,
enableVirtualization: true,
beforeExport: (args: BeforeExportEventArgs) => {
args.width = pivotTableObj.element.offsetWidth;
args.height = pivotTableObj.element.offsetHeight;
},
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 bothVirtualScrollandPDFExportmodules are injected into the Pivot Table.
import { PivotView, IDataSet, VirtualScroll, PDFExport, BeforeExportEventArgs} from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport, VirtualScroll);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
height: 320,
allowPdfExport: true,
enableVirtualization: true,
beforeExport: (args: BeforeExportEventArgs) => {
args.columnSize = 6;
},
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport, VirtualScroll } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { PdfHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport, VirtualScroll);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
enableVirtualization: true,
height: 320,
gridSettings: {
pdfHeaderQueryCellInfo: function (args: PdfHeaderQueryCellInfoEventArgs) {
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;
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320,
gridSettings: {
pdfQueryCellInfo: function (args: PdfQueryCellInfoEventArgs) {
if (args.data && args.data.rowHeaders === 'France.Mountain Bikes' && args.cell && args.cell.gridRow) {
args.cell.gridRow.height = 100;
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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.
The following example demonstrates how the beforeExport event can be used to expand all Pivot Table headers during export. Before expanding, the current drill state is stored by saving the drilledMembers property. Then, the expandAll property is set to true to include all hierarchy levels in the export. After the export completes, the original drill state is restored by resetting expandAll to false and reapplying the saved drilledMembers to the Pivot Table.
import { PivotView, IDataSet, PDFExport, BeforeExportEventArgs } from '@syncfusion/ej2-pivotview';
import { pivotData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
//335 or 315
PivotView.Inject(PDFExport);
let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData as IDataSet[],
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' },
],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
filters: []
},
width: '100%',
height: 400,
allowPdfExport: true,
beforeExport: function (args: BeforeExportEventArgs): void {
let drilledMembers = pivotGridObj.dataSourceSettings.drilledMembers;
pivotGridObj.setProperties({ dataSourceSettings: { expandAll: true, drilledMembers: [] } }, true);
pivotGridObj.engineModule.generateGridData(pivotGridObj.dataSourceSettings, true);
args.dataCollections = [pivotGridObj.engineModule.pivotValues];
pivotGridObj.setProperties({ dataSourceSettings: { expandAll: false, drilledMembers: drilledMembers } }, true);
}
});
pivotGridObj.appendTo('#PivotView');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotGridObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotView'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport, QueryCellInfoEventArgs } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
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: '**'
},
allowPdfExport: true,
height: 450,
gridSettings: {
queryCellInfo: function (args: QueryCellInfoEventArgs) {
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;
}
},
pdfQueryCellInfo: function (args: PdfQueryCellInfoEventArgs) {
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;
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { employeeData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
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
},
width: '100%',
height: 450,
allowPdfExport: true,
showFieldList: true,
hyperlinkSettings: {
showRowHeaderHyperlink: true,
cssClass: 'e-custom-class'
},
cellTemplate: '${getCellContent(data)}',
gridSettings: {
layout: 'Tabular',
pdfQueryCellInfo: (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
};
}
}
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.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);
}
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<style>
.e-custom-class {
color: #008cff;
text-decoration: underline;
}
</style>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, PDFExport, FieldList, IDataSet, AggregateTypes, AggregateEventArgs, SummaryTypes } from '@syncfusion/ej2-pivotview';
import { L10n } from '@syncfusion/ej2-base';
import { pivotData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
PivotView.Inject(FieldList, PDFExport);
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'
}
}
});
const SummaryType: string[] = [
'Sum',
'Count',
'DistinctCount',
'Avg',
'CustomAggregateType1',
'CustomAggregateType2'
];
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
expandAll: true,
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' }],
},
width: '100%',
height: 300,
showFieldList: true,
allowPdfExport: true,
enableVirtualization: true,
dataBound: function (): void {
pivotTableObj.getAllSummaryType = function () {
return SummaryType as AggregateTypes[];
};
pivotTableObj.pivotFieldListModule.aggregateTypes = SummaryType as AggregateTypes[];
pivotTableObj.pivotFieldListModule.getAllSummaryType = function () {
return SummaryType as AggregateTypes[];
};
},
aggregateCellInfo: function (args: AggregateEventArgs): void {
if (args.aggregateType === 'CustomAggregateType1' as SummaryTypes) {
args.value = args.value * 100;
}
if (args.aggregateType === 'CustomAggregateType2' as SummaryTypes) {
args.value = args.value / 100;
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function (): void {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Group_Data } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
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' }],
},
allowPdfExport: true,
height: 500,
width: 1000
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function (): void {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: 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
}
}
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData, base64AlgeriaFont } from './datasource.ts';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
theme: {
header: { font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
}
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, PDFExport, IDataSet } from '@syncfusion/ej2-pivotview';
import { PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { pivotData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
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' }],
},
width: '100%',
height: 300,
allowPdfExport: true,
gridSettings: {
pdfQueryCellInfo: function (args: PdfQueryCellInfoEventArgs): void {
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'
};
}
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function (): void {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData as IDataSet[],
expandAll: false,
drilledMembers: [{ name: 'Year', items: ['FY 2015'] }],
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
allowHorizontalOverflow: true
};
pivotTableObj.pdfExport(pdfExportProperties);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, VirtualScroll, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(VirtualScroll, PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData as IDataSet[],
expandAll: true,
drilledMembers: [{ name: 'Country', items: ['France'] }],
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: []
},
allowPdfExport: true,
exportAllPages: false,
enableVirtualization: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport, BeforeExportEventArgs } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData as IDataSet[],
expandAll: true,
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }],
rows: [{ name: 'Country' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
filters: []
},
beforeExport: function (args: BeforeExportEventArgs) {
args.allowRepeatHeader = false;
},
allowPdfExport: true,
height: 320
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
import { PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
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: []
},
allowPdfExport: true,
height: 320,
gridSettings: {
pdfQueryCellInfo: function (args: PdfQueryCellInfoEventArgs) {
if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
args.cell.row.pdfGrid.repeatHeader = false;
}
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>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 { PivotView, PDFExport, IDataSet, VirtualScroll } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
let names: string[] = ['TOM', 'Hawk', 'Jon', 'Chandler', 'Monica', 'Rachel', 'Phoebe', 'Gunther',
'Ross', 'Geller', 'Joey', 'Bing', 'Tribbiani', 'Janice', 'Bong', 'Perk', 'Green', 'Ken', 'Adams'];
let 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']
let hours: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let rating: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let designation: string[] = ['Manager', 'Engineer 1', 'Engineer 2', 'Developer', 'Tester'];
let status: string[] = ['Completed', 'Open', 'In Progress', 'Review', 'Testing'];
let time: number = 0;
let data: Function = (count: number) => {
let result: Object[] = [];
for (let i: number = 0; i < count; i++) {
result.push({
TaskID: i + 1,
Engineer: names[Math.round(Math.random() * names.length)] || names[0],
City: names[Math.round(Math.random() * city.length)] || city[0],
Designation: designation[Math.round(Math.random() * designation.length)] || designation[0],
Estimation: hours[Math.round(Math.random() * hours.length)] || hours[0],
Rating: hours[Math.round(Math.random() * rating.length)] || rating[0],
Status: status[Math.round(Math.random() * status.length)] || status[0]
});
}
time = new Date().getTime();
return result;
};
PivotView.Inject(VirtualScroll, PDFExport);
let pivotGridObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: data(10000) as IDataSet[],
expandAll: false,
rows: [{ name: 'TaskID' }, { name: 'Status' }],
columns: [{ name: 'Designation' }],
values: [{ name: 'Estimation' }, { name: 'Rating' }]
},
width: 1200,
height: 400,
enableVirtualization: true,
allowPdfExport: true,
exportComplete: function (): void {
pivotGridObj.hideWaitingPopup();
}
});
pivotGridObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function (): void {
pivotGridObj.showWaitingPopup();
setTimeout(() => {
pivotGridObj.pdfExport();
});
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { pivotData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
gridSettings: {
pdfQueryCellInfo: (args: PdfQueryCellInfoEventArgs) => {
//triggers every time for value cell while pdf exporting
}
},
allowPdfExport: true,
height: 350
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div>
<input id="pdf" type="button" value="Export To PDF" name="Export To PDF" />
<div id='PivotTable'></div>
</div>
</div>
</body>
</html>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 { PivotView, IDataSet, PDFExport } from '@syncfusion/ej2-pivotview';
import { pivotData } from './datasource.ts';
import { Button } from '@syncfusion/ej2-buttons';
import { PdfHeaderQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
PivotView.Inject(PDFExport);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData 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: []
},
gridSettings: {
pdfHeaderQueryCellInfo: (args: PdfHeaderQueryCellInfoEventArgs) => {
//triggers every time for header cell while pdf exporting
}
},
allowPdfExport: true,
height: 350
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
pivotTableObj.pdfExport();
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-charts/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div>
<input id="pdf" type="button" value="Export To PDF" name="Export To PDF" />
<div id='PivotTable'></div>
</div>
</div>
</body>
</html>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 { PivotView, IDataSet, VirtualScroll, PDFExport, ExportCompleteEventArgs } from '@syncfusion/ej2-pivotview';
import { Button } from '@syncfusion/ej2-buttons';
import { pivotData } from './datasource.ts';
PivotView.Inject(PDFExport, VirtualScroll);
let pivotTableObj: PivotView = new PivotView({
dataSourceSettings: {
dataSource: pivotData as IDataSet[],
expandAll: true,
drilledMembers: [{ name: 'Country', items: ['France'] }],
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: []
},
allowPdfExport: true,
enableVirtualization: true,
height: 320,
exportComplete: (args: ExportCompleteEventArgs) => {
if (args.promise !== null) {
args.promise.then((e: { blobData: Blob }) => {
console.log(e.blobData);
});
}
}
});
pivotTableObj.appendTo('#PivotTable');
let exportBtn: Button = new Button({ isPrimary: true });
exportBtn.appendTo('#pdf');
document.getElementById('pdf').onclick = function () {
let pdfExportProperties: PdfExportProperties = {
fileName: 'pdfexport.pdf'
};
pivotTableObj.pdfExport(pdfExportProperties, false, null, true);
};<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Pivot Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Pivot Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-base/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-buttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-calendars/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-dropdowns/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-grids/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-inputs/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-lists/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-navigations/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-popups/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-splitbuttons/styles/tailwind3.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/33.1.44/ej2-pivotview/styles/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<input id="pdf" type="button" value="PDF Export" name="PDF Export" />
<div id='PivotTable'></div>
<br />
<div id='PivotTable2'></div>
</div>
</body>
</html>