Pdf cell style customization in Vue Grid component
16 Mar 20239 minutes to read
Conditional cell formatting
Grid cells in the exported PDF can be customized or formatted using pdfQueryCellInfo
event. In this event, we can format the grid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Freight column in the exported document by args.cell and backgroundColor property.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowPdfExport='true' :queryCellInfo='queryCellInfo'
:pdfQueryCellInfo='pdfQueryCellInfo' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='Freight' headerText='Freight' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, PdfExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
toolbarOptions: ['PdfExport']
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_pdfexport') {
this.$refs.grid.pdfExport();
}
},
pdfQueryCellInfo(args) {
if(args.column.field == 'Freight') {
if(args.value < 30) {
args.style = {backgroundColor: '#99ffcc'};
}
else if(args.value < 60) {
args.style = {backgroundColor: '#ffffb3'};
}
else {
args.style = {backgroundColor: '#ff704d'};
}
}
},
queryCellInfo(args) {
if(args.column.field == 'Freight') {
if(args.data['Freight'] < 30) {
args.cell.bgColor = '#99ffcc';
}
else if(args.data['Freight'] < 60) {
args.cell.bgColor = '#ffffb3';
}
else {
args.cell.bgColor = '#ff704d';
}
}
}
},
provide: {
grid: [Toolbar, PdfExport]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Theme
PDF export provides an option to include theme for exported PDF document.
To apply theme in exported PDF, define the theme in pdfExportProperties
.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowPaging='true' :allowPdfExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, PdfExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
toolbarOptions: ['PdfExport']
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
let pdfExportProperties = {
theme: {
header: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true, border: { color: '#64FA50', lineStyle: 'Thin' }
},
record: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
},
caption: {
fontColor: '#64FA50', fontName: 'Calibri', fontSize: 17, bold: true
}
}
};
this.$refs.grid.pdfExport(pdfExportProperties);
}
}
},
provide: {
grid: [Toolbar, PdfExport]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
By default, material theme is applied to exported PDF document.