How can I help you?
PDF export in Vue Pivot Table component
9 Apr 202624 minutes to read
The Vue 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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [PDFExport]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
provide: {
pivotview: [PDFExport]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="PivotTable1" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
<ejs-pivotview id="PivotTable2" :height="height" :dataSourceSettings="dataSourceSettings1"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { salesData } from './pivotData.js';
const dataSourceSettings = {
dataSource: salesData,
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' }]
};
const dataSourceSettings1 = {
dataSource: salesData,
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: 'Sales', format: 'C0' },
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [PDFExport]);
const btnClick = () => {
let pivotGridObj = document.getElementById('PivotTable1').ej2_instances[0];
const pdfExportProperties = {
multipleExport: { type: 'AppendToPage', blankSpace: 100 },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
pivotGridObj.pdfExport(pdfExportProperties, true);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
#pivotview2 {
margin-top: 20px;
}
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="PivotTable1" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
<ejs-pivotview id="PivotTable2" :height="height" :dataSourceSettings="dataSourceSettings1"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { salesData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: salesData,
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' }]
},
dataSourceSettings1: {
dataSource: salesData,
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: 'Sales', format: 'C0' },
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
},
height: 320,
allowPdfExport: true,
isPrimary: true
}
},
provide: {
pivotview: [PDFExport]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('PivotTable1').ej2_instances[0];
const pdfExportProperties = {
multipleExport: { type: 'AppendToPage', blankSpace: 100 },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
pivotGridObj.pdfExport(pdfExportProperties, true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
#pivotview2 {
margin-top: 20px;
}
</style>New page
To export each Pivot Table on a separate page, set the multipleExport.type property to NewPage in pdfExportProperties.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="PivotTable1" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
<ejs-pivotview id="PivotTable2" :height="height" :dataSourceSettings="dataSourceSettings1"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { salesData } from './pivotData.js';
const dataSourceSettings = {
dataSource: salesData,
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' }]
};
const dataSourceSettings1 = {
dataSource: salesData,
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: 'Sales', format: 'C0' },
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [PDFExport]);
const btnClick = () => {
let pivotGridObj = document.getElementById('PivotTable1').ej2_instances[0];
const pdfExportProperties = {
multipleExport: { type: 'NewPage' },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
pivotGridObj.pdfExport(pdfExportProperties, true);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
#pivotview2 {
margin-top: 20px;
}
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="PivotTable1" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
<ejs-pivotview id="PivotTable2" :height="height" :dataSourceSettings="dataSourceSettings1"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { salesData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: salesData,
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' }]
},
dataSourceSettings1: {
dataSource: salesData,
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: 'Sales', format: 'C0' },
],
filterSettings: [{ name: 'Product', items: ['Smartphone'], type: 'Include' }]
},
height: 320,
allowPdfExport: true,
isPrimary: true
}
},
provide: {
pivotview: [PDFExport]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('PivotTable1').ej2_instances[0];
const pdfExportProperties = {
multipleExport: { type: 'NewPage' },
pivotTableIds: ['PivotTable1', 'PivotTable2']
};
pivotGridObj.pdfExport(pdfExportProperties, true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
#pivotview2 {
margin-top: 20px;
}
</style>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:
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :displayOption="displayOption" :chartSettings="chartSettings"> </ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const displayOption = { view: 'Both', primary: 'Table' };
const chartSettings = {
value: 'Amount', enableExport: true, chartSeries: { type: 'Column' }
};
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport(null, false, null, false, true);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :displayOption="displayOption" :chartSettings="chartSettings"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true,
displayOption: { view: 'Both', primary: 'Table' },
chartSettings: {
value: 'Amount', enableExport: true, chartSeries: { type: 'Column' }
}
}
},
provide: {
pivotview: [
PDFExport
]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport(null, false, null, false, true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
}
const height = 320
const allowPdfExport = true
const isPrimary = true
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let 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 }
}
]
}
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let 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 }
}
]
}
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 20, y: 10 },
size: { height: 100, width: 100 },
}
]
}
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
header: {
fromTop: 0,
height: 130,
contents: [
{
type: 'Image',
src: image,
position: { x: 20, y: 10 },
size: { height: 100, width: 100 },
}
]
}
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click.native="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
fileName:'sample.pdf'
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings" :allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent} from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-pivotview":PivotViewComponent
},
data () {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function() {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
fileName:'sample.pdf'
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const allowPdfExport = true;
const height = 320;
const isPrimary = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
pageOrientation: 'Landscape'
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
pageOrientation: 'Landscape'
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
pageSize: 'Letter'
};
pivotGridObj.pdfExport(pdfExportProperties);
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
pageSize: 'Letter'
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :beforeExport="beforeExport">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const enableVirtualization = true;
const isPrimary = true;
provide('pivotview', [
PDFExport,
VirtualScroll
]);
const beforeExport = (args) => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
args.width = pivotGridObj.element.offsetWidth;
args.height = pivotGridObj.element.offsetHeight;
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :beforeExport="beforeExport">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
provide: {
pivotview: [
PDFExport,
VirtualScroll
]
},
methods: {
beforeExport: function (args) {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
args.width = pivotGridObj.element.offsetWidth;
args.height = pivotGridObj.element.offsetHeight;
},
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :beforeExport="beforeExport">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
}
const height = 320
const allowPdfExport = true
const enableVirtualization = true
const isPrimary = true
provide('pivotview', [
PDFExport,
VirtualScroll
]);
const beforeExport = (args) => {
args.columnSize = 6;
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :beforeExport="beforeExport">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
provide: {
pivotview: [
PDFExport,
VirtualScroll
]
},
methods: {
beforeExport: function (args) {
args.columnSize = 6;
},
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";</style>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:
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :gridSettings="gridSettings">
</ejs-pivotview>
</div >
</template >
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const enableVirtualization = true;
const gridSettings = {
columnWidth: 140,
pdfHeaderQueryCellInfo: function (args) {
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;
}
}
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
provide('pivotview', [
PDFExport,
VirtualScroll
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :gridSettings="gridSettings">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true,
enableVirtualization: true,
gridSettings: {
columnWidth: 140,
pdfHeaderQueryCellInfo: function (args) {
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;
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport,
VirtualScroll
]
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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:
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :gridSettings="gridSettings">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const enableVirtualization = true;
const gridSettings = {
columnWidth: 140,
pdfQueryCellInfo: function (args) {
if (args.data && args.data.rowHeaders === 'France.Mountain Bikes' && args.cell && args.cell.gridRow) {
args.cell.gridRow.height = 100;
}
}
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
provide('pivotview', [
PDFExport,
VirtualScroll
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :gridSettings="gridSettings">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport, VirtualScroll } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true,
enableVirtualization: true,
gridSettings: {
columnWidth: 140,
pdfQueryCellInfo: function (args) {
if (args.data && args.data.rowHeaders === 'France.Mountain Bikes' && args.cell && args.cell.gridRow) {
args.cell.gridRow.height = 100;
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport,
VirtualScroll
]
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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 when exported to the PDF file and do not affect the Pivot Table displayed on the screen. To modify the export behavior, use the beforeExport event. This event is triggered right before the export operation begins.
In the following example, the beforeExport event is used to expand all Pivot Table headers by setting the expandAll property to true. The generateGridData method is then called to obtain the updated pivotValues. The updated pivotValues are assigned to args.dataCollections for the export. Finally, expandAll is set to false again to restore the original state of the Pivot Table.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">Excel Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowExcelExport="allowExcelExport" :beforeExport="beforeExport"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, ExcelExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
enableSorting: true,
columns: [{ name: 'Year' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' },
],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
filters: []
};
const height = 320;
const allowExcelExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.excelExport();
};
const beforeExport = (args) => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
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);
};
provide('pivotview', [
ExcelExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">Excel Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowExcelExport="allowExcelExport" :beforeExport="beforeExport"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, ExcelExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
enableSorting: true,
columns: [{ name: 'Year' }],
values: [
{ name: 'Sold', caption: 'Units Sold' },
{ name: 'Amount', caption: 'Sold Amount' },
],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
expandAll: false,
},
height: 320,
allowExcelExport: true,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.excelExport();
},
beforeExport: function (args) {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
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);
},
},
provide: {
pivotview: [
ExcelExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: '**'
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
const gridSettings = {
columnWidth: 140,
queryCellInfo: function (args) {
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) {
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;
}
}
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: '**'
},
height: 320,
allowPdfExport: true,
isPrimary: true,
gridSettings: {
queryCellInfo: function (args) {
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) {
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;
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings" :cellTemplate="cellTemplate" :hyperlinkSettings="hyperlinkSettings"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { employeeData } from './pivotData.js';
window.getCellContent = function (args) {
let pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
if (args.cellInfo && args.cellInfo.axis === 'row' && args.cellInfo.valueSort.axis === 'EmployeeID') {
var employeeId_2 = Number(args.cellInfo.actualText);
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.EmployeeID === employeeId_2; });
if (employee && employee.EmployeeImage) {
var imgSrc = '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 '';
};
window.handleImageLoad = function (imgElement) {
try {
var cell = imgElement.closest('th, td');
if (cell) {
var cellValue = cell.querySelector('.e-cellvalue');
if (cellValue) {
cellValue.style.display = 'none';
}
}
}
catch (error) {
console.warn('Error handling image load:', error);
}
}
const dataSourceSettings = {
dataSource: employeeData,
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
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
const hyperlinkSettings = {
showRowHeaderHyperlink: true,
cssClass: 'e-custom-class'
}
const cellTemplate = '${getCellContent(data)}';
const gridSettings = {
layout: 'Tabular',
pdfQueryCellInfo: function (args) {
let pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
if (args.data && args.data.axis === 'row') {
if (args.data.valueSort && args.data.valueSort.axis === 'FirstName') {
var firstName_1 = args.data.actualText;
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.FirstName === firstName_1; });
if (employee && employee.EmailID) {
args.hyperLink = {
target: 'mailto:' + employee.EmailID,
displayText: args.value
};
}
}
if (args.data.valueSort && args.data.valueSort.axis === 'EmployeeID') {
var employeeId_1 = Number(args.data.actualText);
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.EmployeeID === employeeId_1; });
if (employee && employee.EmployeeImage) {
args.image = {
base64: employee.EmployeeImage,
height: 57.5,
width: 57.5
};
}
}
}
}
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :cellTemplate="cellTemplate" :hyperlinkSettings="hyperlinkSettings"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { employeeData } from './pivotData.js';
window.getCellContent = function (args) {
let pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
if (args.cellInfo && args.cellInfo.axis === 'row' && args.cellInfo.valueSort.axis === 'EmployeeID') {
var employeeId_2 = Number(args.cellInfo.actualText);
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.EmployeeID === employeeId_2; });
if (employee && employee.EmployeeImage) {
var imgSrc = '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 '';
};
window.handleImageLoad = function (imgElement) {
try {
var cell = imgElement.closest('th, td');
if (cell) {
var cellValue = cell.querySelector('.e-cellvalue');
if (cellValue) {
cellValue.style.display = 'none';
}
}
}
catch (error) {
console.warn('Error handling image load:', error);
}
}
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: employeeData,
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
},
height: 320,
allowPdfExport: true,
isPrimary: true,
cellTemplate: '${getCellContent(data)}',
hyperlinkSettings: {
showRowHeaderHyperlink: true,
cssClass: 'e-custom-class'
},
gridSettings: {
layout: 'Tabular',
pdfQueryCellInfo: function (args) {
let pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
if (args.data && args.data.axis === 'row') {
if (args.data.valueSort && args.data.valueSort.axis === 'FirstName') {
var firstName_1 = args.data.actualText;
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.FirstName === firstName_1; });
if (employee && employee.EmailID) {
args.hyperLink = {
target: 'mailto:' + employee.EmailID,
displayText: args.value
};
}
}
if (args.data.valueSort && args.data.valueSort.axis === 'EmployeeID') {
var employeeId_1 = Number(args.data.actualText);
var employee = pivotTableObj.dataSourceSettings.dataSource.find(function (emp) { return emp.EmployeeID === employeeId_1; });
if (employee && employee.EmployeeImage) {
args.image = {
base64: employee.EmployeeImage,
height: 57.5,
width: 57.5
};
}
}
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :dataBound="ondataBound"
:aggregateCellInfo="aggregateCell" :showFieldList="showFieldList"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
import { L10n } from '@syncfusion/ej2-base';
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',
}
}
});
let SummaryType = [
'Sum',
'Count',
'DistinctCount',
'Avg',
'CustomAggregateType1',
'CustomAggregateType2'
];
const dataSourceSettings = {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', type: 'CustomAggregateType1' }, { name: 'Amount', type: 'CustomAggregateType2' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const showFieldList = true;
const ondataBound = () => {
let pivotObj = document.getElementById('pivotview').ej2_instances[0];
pivotObj.getAllSummaryType = function () {
return SummaryType;
};
pivotObj.pivotFieldListModule.aggregateTypes = SummaryType;
pivotObj.pivotFieldListModule.getAllSummaryType = function () {
return SummaryType;
};
};
const aggregateCell = (args) => {
if (args.aggregateType === 'CustomAggregateType1') {
args.value = args.value * 100;
}
if (args.aggregateType === 'CustomAggregateType2') {
args.value = args.value / 100;
}
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
provide('pivotview', [
PDFExport,
FieldList
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :dataBound="ondataBound"
:aggregateCellInfo="aggregateCell" :showFieldList="showFieldList"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { L10n } from '@syncfusion/ej2-base';
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
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',
}
}
});
let SummaryType = [
'Sum',
'Count',
'DistinctCount',
'Avg',
'CustomAggregateType1',
'CustomAggregateType2'
];
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
columns: [{ name: 'Year' }, { name: 'Quarter' }],
values: [{ name: 'Sold', type: 'CustomAggregateType1' }, { name: 'Amount', type: 'CustomAggregateType2' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
},
height: 320,
allowPdfExport: true,
isPrimary: true,
showFieldList: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
},
ondataBound: function () {
let pivotObj = document.getElementById('pivotview').ej2_instances[0];
pivotObj.getAllSummaryType = function () {
return SummaryType;
};
pivotObj.pivotFieldListModule.aggregateTypes = SummaryType;
pivotObj.pivotFieldListModule.getAllSummaryType = function () {
return SummaryType;
};
},
aggregateCell: function (args) {
if (args.aggregateType === 'CustomAggregateType1') {
args.value = args.value * 100;
}
if (args.aggregateType === 'CustomAggregateType2') {
args.value = args.value / 100;
}
}
},
provide: {
pivotview: [
PDFExport,
FieldList
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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).
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { Group_Data } from './pivotData.js';
const dataSourceSettings = {
dataSource: Group_Data,
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' }],
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { Group_Data } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: Group_Data,
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' }],
},
height: 320,
allowPdfExport: true,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
},
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let 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
}
}
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
provide: {
pivotview: [
PDFExport
]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let 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
}
}
};
pivotGridObj.pdfExport(pdfExportProperties);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData, base64AlgeriaFont } from './pivotData.js';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
theme: {
header: { font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
}
};
pivotGridObj.pdfExport(pdfExportProperties);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData, base64AlgeriaFont } from './pivotData.js';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
provide: {
pivotview: [
PDFExport
]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
theme: {
header: { font: new PdfTrueTypeFont(base64AlgeriaFont, 11) },
caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) },
record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) }
}
};
pivotGridObj.pdfExport(pdfExportProperties);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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' }],
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
const gridSettings = {
columnWidth: 140,
if(args.data && args.data.actualText === 'Sold') {
if ((args).value < 700) {
args.style = {
backgroundColor: '#df3800',
fontFamily: 'Courier',
textPenColor: '#FFFFFF'
};
} else {
args.style = {
backgroundColor: '#00A45A',
fontFamily: 'TimesRoman',
textPenColor: '#FFFFFF'
};
}
}
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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' }],
},
height: 320,
allowPdfExport: true,
isPrimary: true,
gridSettings: {
pdfQueryCellInfo: function (args) {
if (args.data && args.data.actualText === 'Sold') {
if ((args).value < 700) {
args.style = {
backgroundColor: '#df3800',
fontFamily: 'Courier',
textPenColor: '#FFFFFF'
};
} else {
args.style = {
backgroundColor: '#00A45A',
fontFamily: 'TimesRoman',
textPenColor: '#FFFFFF'
};
}
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
allowHorizontalOverflow: true
};
pivotGridObj.pdfExport(pdfExportProperties);
};
const gridSettings = {
columnWidth: 140
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: []
},
height: 320,
allowPdfExport: true,
isPrimary: true,
gridSettings: {
columnWidth: 140
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
allowHorizontalOverflow: true
};
pivotGridObj.pdfExport(pdfExportProperties);
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :exportAllPages="exportAllPages">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const enableVirtualization = true;
const exportAllPages = false;
const isPrimary = true;
provide('pivotview', [VirtualScroll, PDFExport]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :exportAllPages="exportAllPages">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: []
},
height: 320,
allowPdfExport: true,
enableVirtualization: true,
exportAllPages: false,
isPrimary: true
}
},
provide: {
pivotview: [VirtualScroll, PDFExport]
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :beforeExport="beforeExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
const beforeExport = (args) => {
args.allowRepeatHeader = false;
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :beforeExport="beforeExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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,
isPrimary: true
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
},
beforeExport: function (args) {
args.allowRepeatHeader = false;
},
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const isPrimary = true;
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
const gridSettings = {
columnWidth: 140,
if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
args.cell.row.pdfGrid.repeatHeader = false;
}
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :gridSettings="gridSettings"> </ejs-pivotview>
</div >
</template >
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: []
},
height: 320,
allowPdfExport: true,
isPrimary: true,
gridSettings: {
pdfQueryCellInfo: function (args) {
if (args.cell && args.cell.row && args.cell.row.pdfGrid) {
args.cell.row.pdfGrid.repeatHeader = false;
}
}
}
}
},
methods: {
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
},
provide: {
pivotview: [
PDFExport
]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :allowPdfExport="allowPdfExport"
:enableVirtualization="enableVirtualization" :exportComplete="exportComplete">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
function data(count) {
let result = [];
let dt = 0;
for (let i = 1; i < count + 1; i++) {
dt++;
let round;
let toString = i.toString();
if (toString.length === 1) {
round = "0000" + i;
} else if (toString.length === 2) {
round = "000" + i;
} else if (toString.length === 3) {
round = "00" + i;
} else if (toString.length === 4) {
round = "0" + i;
} else {
round = toString;
}
result.push({
ProductID: "PRO-" + round,
Year: "FY " + (dt + 2013),
Price: Math.round(Math.random() * 5000) + 5000,
Sold: Math.round(Math.random() * 80) + 10
});
if (dt / 4 == 1) {
dt = 0;
}
}
return result;
}
const dataSourceSettings = {
dataSource: data(10000),
expandAll: false,
rows: [{ name: 'ProductID' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
};
const height = 350;
const enableVirtualization = true;
const allowPdfExport = true;
const isPrimary = true;
const exportComplete = (args) => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.hideWaitingPopup();
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.showWaitingPopup();
setTimeout(function () {
pivotGridObj.pdfExport();
});
};
provide('pivotview', [VirtualScroll, PDFExport]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height"
:enableVirtualization="enableVirtualization" :allowPdfExport="allowPdfExport" :exportComplete="exportComplete">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
function data(count) {
let result = [];
let dt = 0;
for (let i = 1; i < count + 1; i++) {
dt++;
let round;
let toString = i.toString();
if (toString.length === 1) {
round = "0000" + i;
} else if (toString.length === 2) {
round = "000" + i;
} else if (toString.length === 3) {
round = "00" + i;
} else if (toString.length === 4) {
round = "0" + i;
} else {
round = toString;
}
result.push({
ProductID: "PRO-" + round,
Year: "FY " + (dt + 2013),
Price: Math.round(Math.random() * 5000) + 5000,
Sold: Math.round(Math.random() * 80) + 10
});
if (dt / 4 == 1) {
dt = 0;
}
}
return result;
}
export default {
name: "App",
components: {
"ejs-pivotview": PivotViewComponent,
"ejs-button": ButtonComponent,
},
data() {
return {
dataSourceSettings: {
dataSource: data(10000),
expandAll: false,
rows: [{ name: 'ProductID' }],
columns: [{ name: 'Year' }],
values: [{ name: 'Price', caption: 'Unit Price' }, { name: 'Sold', caption: 'Unit Sold' }]
},
height: 350,
enableVirtualization: true,
allowPdfExport: true,
isPrimary: true,
},
methods: {
exportComplete: function (args) {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.hideWaitingPopup();
},
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.showWaitingPopup();
setTimeout(function () {
pivotGridObj.pdfExport();
});
}
}
provide: {
pivotview: [VirtualScroll, PDFExport]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 350;
const allowPdfExport = true;
const gridSettings = {
columnWidth: 140,
pdfQueryCellInfo: function () {
//triggers for every value cell while pdf export
}
};
const isPrimary = true;
provide('pivotview', [
PDFExport
]);
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: 350,
allowPdfExport: true,
gridSettings: {
columnWidth: 140,
pdfQueryCellInfo: function () {
//triggers for every value cell while pdf export
}
},
isPrimary: true
}
},
provide: {
pivotview: [
PDFExport
]
},
methods: {
btnClick: function (args) {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script setup>
import { PivotViewComponent as EjsPivotview, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 350;
const allowPdfExport = true;
const isPrimary = true;
const gridSettings = {
columnWidth: 140,
pdfHeaderQueryCellInfo: function () {
//triggers for every header cell while pdf export
}
};
provide('pivotview', [
PDFExport
]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings"
:allowPdfExport="allowPdfExport"> </ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent,
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: 350,
allowPdfExport: true,
isPrimary: true,
gridSettings: {
columnWidth: 140,
pdfHeaderQueryCellInfo: function () {
//triggers for every header cell while pdf export
}
}
}
},
provide: {
pivotview: [
PDFExport
]
},
methods:{
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
pivotGridObj.pdfExport();
},
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>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.
<template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :exportComplete="exportComplete">
</ejs-pivotview>
</div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
const dataSourceSettings = {
dataSource: pivotData,
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: []
};
const height = 320;
const allowPdfExport = true;
const enableVirtualization = true;
const isPrimary = true;
provide('pivotview', [VirtualScroll, PDFExport]);
const exportComplete = (args) => {
args.promise.then(function (e) {
console.log(e.blobData);
});
};
const btnClick = () => {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
fileName: 'pdfexport.csv'
};
pivotGridObj.pdfExport(pdfExportProperties, false, null, true);
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";</style><template>
<div id="app">
<ejs-button id="export-btn" :isPrimary="isPrimary" v-on:click="btnClick">PDF Export</ejs-button>
<ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
:allowPdfExport="allowPdfExport" :enableVirtualization="enableVirtualization" :exportComplete="exportComplete">
</ejs-pivotview>
</div>
</template>
<script>
import { PivotViewComponent, VirtualScroll, PDFExport } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { pivotData } from './pivotData.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-pivotview": PivotViewComponent
},
data() {
return {
dataSourceSettings: {
dataSource: pivotData,
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: []
},
height: 320,
allowPdfExport: true,
enableVirtualization: true,
isPrimary: true
}
},
provide: {
pivotview: [
VirtualScroll,
PDFExport
]
},
methods: {
exportComplete: function (args) {
args.promise.then(function (e) {
console.log(e.blobData);
});
},
btnClick: function () {
let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
let pdfExportProperties = {
fileName: 'pdfexport.csv'
};
pivotGridObj.pdfExport(pdfExportProperties, false, null, true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/tailwind3.css";
</style>