Exporting grid with templates in Vue Grid control
7 May 202524 minutes to read
The grid offers the option to export the column, detail, and caption templates to a PDF document. The template contains images, hyperlinks, and customized text.
Exporting with column template
The PDF export functionality allows you to export Grid columns that include images, hyperlinks, and custom text to a PDF document.
In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.
PDF Export supports base64 string to export the images.
<template>
<ejs-grid id="ColumnTemplateGrid" ref="grid" :dataSource="data" :allowPdfExport="true"
:toolbar="toolbar" :toolbarClick="toolbarClick" :pdfQueryCellInfo="pdfQueryCellInfo" height=315>
<e-columns>
<e-column headerText="Employee Image" textAlign="Center" :template="'imageTemplate'" width="150"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" width="125"></e-column>
<e-column field="FirstName" headerText="Name" width="120"></e-column>
<e-column headerText="Email ID" :template="'mailTemplate'" width="170"></e-column>
</e-columns>
<template v-slot:imageTemplate="{data}">
<div class="image">
<img :src="'data:image/jpeg;base64,'+data.EmployeeImage" :alt="data.EmployeeID"/>
</div>
</template>
<template v-slot:mailTemplate="{data}">
<div class="link">
<a :href="'mailto:'+data.EmailID">{{data.EmailID}}</a>
</div>
</template>
</ejs-grid>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
const grid = ref(null);
const data = employeeData;
const toolbar = ['PdfExport'];
const toolbarClick = function (args) {
if (args.item.id === 'ColumnTemplateGrid_pdfexport') {
grid.value.pdfExport();
}
}
const pdfQueryCellInfo = function(args) {
if (args.column.headerText === 'Employee Image') {
args.image = {
base64: args.data.EmployeeImage,
height: 50,
width: 50,
};
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + args.data.EmailID,
displayText: args.data.EmailID,
};
}
}
provide('grid',[PdfExport, Toolbar]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.image img {
height: 55px;
width: 55px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
</style><template>
<ejs-grid id="ColumnTemplateGrid" ref="grid" :dataSource="data" :allowPdfExport="true"
:toolbar="toolbar" :toolbarClick="toolbarClick" :pdfQueryCellInfo="pdfQueryCellInfo" height=315>
<e-columns>
<e-column headerText="Employee Image" textAlign="Center" :template="'imageTemplate'" width="150"></e-column>
<e-column field="EmployeeID" headerText="Employee ID" width="125"></e-column>
<e-column field="FirstName" headerText="Name" width="120"></e-column>
<e-column headerText="Email ID" :template="'mailTemplate'" width="170"></e-column>
</e-columns>
<template v-slot:imageTemplate="{data}">
<div class="image">
<img :src="'data:image/jpeg;base64,'+data.EmployeeImage" :alt="data.EmployeeID"/>
</div>
</template>
<template v-slot:mailTemplate="{data}">
<div class="link">
<a :href="'mailto:'+data.EmailID">{{data.EmailID}}</a>
</div>
</template>
</ejs-grid>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: employeeData,
toolbar: ['PdfExport'],
};
},
methods: {
toolbarClick: function (args) {
if (args.item.id === 'ColumnTemplateGrid_pdfexport') {
this.$refs.grid.pdfExport();
}
},
pdfQueryCellInfo: function(args) {
if (args.column.headerText === 'Employee Image') {
args.image = {
base64: args.data.EmployeeImage,
height: 50,
width: 50,
};
}
if (args.column.headerText === 'Email ID') {
args.hyperLink = {
target: 'mailto:' + args.data.EmailID,
displayText: args.data.EmailID,
};
}
}
},
provide: {
grid: [PdfExport, Toolbar],
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.image img {
height: 55px;
width: 55px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
</style>
Exporting with detail template
By default, the grid will export the parent grid with expanded detail rows alone. Change the exporting option by using the PdfExportProperties.hierarchyExportMode property. The available options are:
| Mode | Behavior |
|---|---|
| Expanded | Exports the parent grid with expanded detail rows. |
| All | Exports the parent grid with all the detail rows. |
| None | Exports the parent grid alone. |
The detail rows in the exported PDF can be customized or formatted using the exportDetailTemplate event. In this event, the detail rows of the PDF document are formatted in accordance with their parent row details.
In the following sample, the detail row content is formatted by specifying the columnCount, columnHeader, and rows properties using its parentRow details. This allows for the creation of detail rows in the PDF document. Additionally, custom styles can be applied to specific cells using the style property.
<template>
<ejs-grid id="DetailTemplateGrid" ref="grid" :dataSource="data" :detailTemplate="'detailTemplate'" :toolbar="toolbar"
:toolbarClick="toolbarClick" :exportDetailTemplate="exportDetailTemplate" height=315 :allowPdfExport="true">
<e-columns>
<e-column field="Category" headerText="Category" width="140" textAlign="Right"></e-column>
<e-column field="ProductID" headerText="Product ID" width="120"></e-column>
<e-column field="Status" headerText="Status" width="120"></e-column>
</e-columns>
<template v-slot:detailTemplate="{ data }">
<table class="detailtable" width="100%">
<colgroup>
<col width="40%" />
<col width="60%" />
</colgroup>
<thead>
<tr>
<th colspan="2" style="font-weight: 500;text-align: center;background-color: #ADD8E6;">
Product Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class='photo' :src="'data:image/jpeg;base64,'+data.ProductImg" alt="data.EmployeeID" />
</td>
<td>
<span style="font-weight: 500;color: #0a76ff;">Offers: {{data.Offers}} </span>
</td>
</tr>
<tr>
<td>
<span>Available: {{data.Available}} </span>
</td>
</tr>
<tr>
<td>
<span class="link">
Contact: <a :href="'mailto:'+data.Contact">{{data.Contact}}</a>
</span>
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;color: #0a76ff;"> Ratings: {{data.Ratings}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span> {{data.productDesc}}</span>
</td>
<td>
<span>{{data.ReturnPolicy}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span style="font-weight: 500;" > {{data.Cost}}</span>
</td>
<td>
<span>{{data.Cancellation}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span :class="data.Status" style="font-weight: 500;" > {{data.Status}}</span>
</td>
<td>
<span style="font-weight: 500;color: #0a76ff;">{{data.Delivery}}</span>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-grid>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, DetailRow, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
const grid = ref(null);
const data = employeeData;
const toolbar = ['PdfExport'];
const toolbarClick = function (args) {
if (args.item.id === 'DetailTemplateGrid_pdfexport') {
grid.value.pdfExport({ hierarchyExportMode: "Expanded" });
}
}
const exportDetailTemplate = function(args) {
args.value = {
columnCount: 2,
columnHeader: [
{
cells: [{
index: 0, colSpan: 2, value: 'Product Details',
style: { backColor: '#ADD8E6', pdfTextAlignment: 'Center', bold: true }
}]
}
],
rows: [
{
cells: [
{
index: 0, rowSpan: 4, image: { base64: args.parentRow.data['ProductImg'], width: 80 }
},
{
index: 1, value: "Offers: " + args.parentRow.data['Offers'],
style: { fontColor: '#0A76FF', fontSize: 15 }
},
]
},
{
cells: [
{
index: 1, value: 'Available: ' + args.parentRow.data['Available']
}]
},
{
cells: [
{
index: 1, value: 'Contact: ',
hyperLink: {
target: 'mailto:' + args.parentRow.data['Contact'],
displayText: args.parentRow.data['Contact']
}
}
]
},
{
cells: [
{
index: 1, value: 'Ratings: ' + args.parentRow.data['Ratings'],
style: { fontColor: '#0A76FF', fontSize: 15 }
}
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['productDesc'],
style: { pdfTextAlignment: 'Center' }
},
{ index: 1, value: args.parentRow.data['ReturnPolicy'] }
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['Cost'],
style: { bold: true, pdfTextAlignment: 'Center' }
},
{ index: 1, value: args.parentRow.data['Cancellation'] }
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['Status'],
style: {
fontColor: args.parentRow.data['Status'] === 'Available' ? '#00FF00' : '#FF0000',
pdfTextAlignment: 'Center', fontSize: 15
}
},
{
index: 1, value: args.parentRow.data['Delivery'],
style: { fontColor: '#0A76FF', fontSize: 15 }
}
]
}
],
};
}
provide('grid', [DetailRow, PdfExport, Toolbar]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo {
width: 100px;
height: 100px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
.Unavailable {
color: #FF0000;
}
.Available {
color: #00FF00;
}
@media screen and (max-width: 800px) and (min-width: 320px) {
.photo {
width: 70px;
height: 70px;
}
}
</style><template>
<ejs-grid id="DetailTemplateGrid" ref="grid" :dataSource="data" :detailTemplate="'detailTemplate'" :toolbar="toolbar"
:toolbarClick="toolbarClick" :exportDetailTemplate="exportDetailTemplate" height=315 :allowPdfExport="true">
<e-columns>
<e-column field="Category" headerText="Category" width="140" textAlign="Right"></e-column>
<e-column field="ProductID" headerText="Product ID" width="120"></e-column>
<e-column field="Status" headerText="Status" width="120"></e-column>
</e-columns>
<template v-slot:detailTemplate="{ data }">
<table class="detailtable" width="100%">
<colgroup>
<col width="40%" />
<col width="60%" />
</colgroup>
<thead>
<tr>
<th colspan="2" style="font-weight: 500;text-align: center;background-color: #ADD8E6;">
Product Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" style="text-align: center;">
<img class='photo' :src="'data:image/jpeg;base64,'+data.ProductImg" alt="data.EmployeeID" />
</td>
<td>
<span style="font-weight: 500;color: #0a76ff;">Offers: {{data.Offers}} </span>
</td>
</tr>
<tr>
<td>
<span>Available: {{data.Available}} </span>
</td>
</tr>
<tr>
<td>
<span class="link">
Contact: <a :href="'mailto:'+data.Contact">{{data.Contact}}</a>
</span>
</td>
</tr>
<tr>
<td>
<span style="font-weight: 500;color: #0a76ff;"> Ratings: {{data.Ratings}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span> {{data.productDesc}}</span>
</td>
<td>
<span>{{data.ReturnPolicy}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span style="font-weight: 500;" > {{data.Cost}}</span>
</td>
<td>
<span>{{data.Cancellation}}</span>
</td>
</tr>
<tr>
<td style="text-align: center;">
<span :class="data.Status" style="font-weight: 500;" > {{data.Status}}</span>
</td>
<td>
<span style="font-weight: 500;color: #0a76ff;">{{data.Delivery}}</span>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-grid>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, DetailRow, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: employeeData,
toolbar: ['PdfExport'],
};
},
methods: {
toolbarClick: function (args) {
if (args.item.id === 'DetailTemplateGrid_pdfexport') {
this.$refs.grid.pdfExport({ hierarchyExportMode: "Expanded" });
}
},
exportDetailTemplate: function(args) {
args.value = {
columnCount: 2,
columnHeader: [
{
cells: [{
index: 0, colSpan: 2, value: 'Product Details',
style: { backColor: '#ADD8E6', pdfTextAlignment: 'Center', bold: true }
}]
}
],
rows: [
{
cells: [
{
index: 0, rowSpan: 4, image: { base64: args.parentRow.data['ProductImg'], width: 80 }
},
{
index: 1, value: "Offers: " + args.parentRow.data['Offers'],
style: { fontColor: '#0A76FF', fontSize: 15 }
},
]
},
{
cells: [
{
index: 1, value: 'Available: ' + args.parentRow.data['Available']
}]
},
{
cells: [
{
index: 1, value: 'Contact: ',
hyperLink: {
target: 'mailto:' + args.parentRow.data['Contact'],
displayText: args.parentRow.data['Contact']
}
}
]
},
{
cells: [
{
index: 1, value: 'Ratings: ' + args.parentRow.data['Ratings'],
style: { fontColor: '#0A76FF', fontSize: 15 }
}
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['productDesc'],
style: { pdfTextAlignment: 'Center' }
},
{ index: 1, value: args.parentRow.data['ReturnPolicy'] }
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['Cost'],
style: { bold: true, pdfTextAlignment: 'Center' }
},
{ index: 1, value: args.parentRow.data['Cancellation'] }
]
},
{
cells: [
{
index: 0, value: args.parentRow.data['Status'],
style: {
fontColor: args.parentRow.data['Status'] === 'Available' ? '#00FF00' : '#FF0000',
pdfTextAlignment: 'Center', fontSize: 15
}
},
{
index: 1, value: args.parentRow.data['Delivery'],
style: { fontColor: '#0A76FF', fontSize: 15 }
}
]
}
],
};
}
},
provide: {
grid: [DetailRow, PdfExport, Toolbar],
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
.detailtable td {
font-size: 13px;
padding: 4px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo {
width: 100px;
height: 100px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
.Unavailable {
color: #FF0000;
}
.Available {
color: #00FF00;
}
@media screen and (max-width: 800px) and (min-width: 320px) {
.photo {
width: 70px;
height: 70px;
}
}
</style>
Exporting with caption template
The PDF export feature enables exporting of Grid with a caption template to an PDF document.
In the following sample, the customized caption text is exported to PDF using captionText property in the exportGroupCaption event.
<template>
<ejs-grid id="CaptionTemplateGrid" ref="grid" :dataSource="data" :allowGrouping="true" :groupSettings="groupOptions"
:allowPdfExport="true" :toolbar="toolbar" :toolbarClick="toolbarClick" :exportGroupCaption="exportGroupCaption" height=315>
<e-columns>
<e-column field="EmployeeID" headerText="Employee ID" width="120"></e-column>
<e-column field="FirstName" headerText="Name" width="120"></e-column>
<e-column field="City" headerText="City"></e-column>
<e-column field="Title" headerText="Title" width="170"></e-column>
</e-columns>
</ejs-grid>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Group, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
const grid = ref(null);
const data = employeeData;
const toolbar = ['PdfExport'];
const groupOptions = {
columns: ['EmployeeID'],
captionTemplate: '${field} - ${key}'
}
const toolbarClick = function (args) {
if (args.item.id === 'CaptionTemplateGrid_pdfexport') {
grid.value.pdfExport();
}
}
const exportGroupCaption = function(args) {
args.captionText = args.data.field + ' - ' + args.data.key;
}
provide('grid', [Group, PdfExport, Toolbar]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style><template>
<ejs-grid id="CaptionTemplateGrid" ref="grid" :dataSource="data" :allowGrouping="true" :groupSettings="groupOptions"
:allowPdfExport="true" :toolbar="toolbar" :toolbarClick="toolbarClick" :exportGroupCaption="exportGroupCaption" height=315>
<e-columns>
<e-column field="EmployeeID" headerText="Employee ID" width="120"></e-column>
<e-column field="FirstName" headerText="Name" width="120"></e-column>
<e-column field="City" headerText="City"></e-column>
<e-column field="Title" headerText="Title" width="170"></e-column>
</e-columns>
</ejs-grid>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Group, PdfExport, Toolbar } from '@syncfusion/ej2-vue-grids';
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: employeeData,
toolbar: ['PdfExport'],
groupOptions: {
columns: ['EmployeeID'],
captionTemplate: '${field} - ${key}'
}
};
},
methods: {
toolbarClick: function (args) {
if (args.item.id === 'CaptionTemplateGrid_pdfexport') {
this.$refs.grid.pdfExport();
}
},
exportGroupCaption: function(args) {
args.captionText = args.data.field + ' - ' + args.data.key;
}
},
provide: {
grid: [Group, PdfExport, Toolbar],
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>