Contents
- Export current page records
- Export the selected records
- Exporting grouped records
- Export with hidden columns
- Show or hide columns while exporting
- Show or hide columns while exporting with stacked header
- Enable filtering in the exported excel file
- Define file name
- Export the master detail grid
- Customizing columns on export
- Font and color customization
- Rotate a header text in the exported grid
- Conditional cell formatting
- Adding header and footer in the exported Excel file
- Export grid as blob
Having trouble getting help?
Contact Support
Contact Support
Excel export options in Vue Grid component
5 Apr 202524 minutes to read
The Syncfusion Vue Grid component allows you to customize the Excel or CSV export options functionality. This flexibility enables you to have greater control over the exported content and layout to meet your specific requirements.
The Excel or CSV export action can be customized based on your requirements using the excelExportProperties property. By using the excelExportProperties property, you can export specific columns, exclude or include hidden column, export with custom data source, enable filter in the exported excel or CSV file, change the file name, add header and footer, multiple grid exporting, customize the data based on query, define delimiter for CSV exporting and set the theme.
To get start quickly with Excel export Options, you can check on this video:
Export current page records
Exporting the current page in Syncfusion Vue Grid to a Excel or CSV document provides the ability to export the currently displayed page records. This feature allows for generating Excel or CSV documents that specifically include the content from the current page of the grid.
To export the current page of the grid to an Excel or CSV document, you need to specify the exportType property. This property allows you to define which records you want to export. You can choose between two options:
- CurrentPage: Exports only the records on the current grid page.
- AllPages: Exports all the records from the grid.
The following example demonstrates how to export current page to a Excel document when a toolbar item is clicked.
<template>
<div id="app">
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0"> Change export type: </label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' index="0" width="150" :dataSource="dropDownData" :fields='fields'></ejs-dropdownlist>
</div>
<ejs-grid style="margin-top: 10px" ref='grid' id='Grid' :dataSource='employeeData' :toolbar='toolbarOptions'
height='220px' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
<e-column field='FirstName' headerText='FirstName' width=100></e-column>
<e-column field='LastName' headerText='Last Name' width=100></e-column>
<e-column field='City' headerText='City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport, Page } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { employeeData } from './datasource.js';
const grid = ref(null);
const dropdown = ref(null);
const fields = { text: 'text', value: 'value' };
const pageSettings = { pageSize: 6};
const dropDownData = [
{ text: 'CurrentPage', value: 'CurrentPage' },
{ text: 'AllPages', value: 'AllPages' },
];
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
exportType: dropdown.value.$el.value,
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport, Page]);
</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>
<div id="app">
<div style="display: inline-block;">
<label style="padding: 10px 10px 12px 0"> Change export type: </label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' index="0" width="150" :dataSource="dropDownData" :fields='fields'></ejs-dropdownlist>
</div>
<ejs-grid style="margin-top: 10px" ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions'
height='220px' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
<e-column field='FirstName' headerText='FirstName' width=100></e-column>
<e-column field='LastName' headerText='Last Name' width=100></e-column>
<e-column field='City' headerText='City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Page } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-dropdownlist":DropDownListComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: employeeData,
toolbarOptions: ['ExcelExport'],
pageSettings : { pageSize: 6},
fields: { text: 'text', value: 'value' },
dropDownData : [
{ text: 'CurrentPage', value: 'CurrentPage' },
{ text: 'AllPages', value: 'AllPages' },
]
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
exportType: this.$refs.dropdown.$el.value,
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport, Page]
}
}
</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>Export the selected records
Exporting only the selected records from the Grid allows generating Excel or CSV document that include only the desired data from the Grid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted Excel or CSV exports.
To export only the selected records by utilizing the exportProperties.dataSource property in the toolbarClick event.
To export the selected records from the grid to a Excel or CSV file, you can follow these steps:
-
Handle the toolbarClick event of the Grid.
-
Retrieve the selected records using the getSelectedRecords method.
-
Assign the selected data to the exportProperties.dataSource property.
-
Trigger the export operation using the excelExport or csvExport method.
The following example demonstrates how to export the selected records to a Excel document when a toolbar item is clicked.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' height='220px' :dataSource='data' :toolbar='toolbarOptions'
:allowExcelExport='true' :toolbarClick='toolbarClick' :selectionSettings='selectionOption'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></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-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = [ 'ExcelExport'];
const selectionOption = { type: 'Multiple', enableSimpleMultiRowSelection: true };
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let selectedRecords = grid.value.getSelectedRecords();
let excelExportProperties = {
dataSource: selectedRecords
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' height='220px' :dataSource='data' :toolbar='toolbarOptions'
:allowExcelExport='true' :toolbarClick='toolbarClick' :selectionSettings='selectionOption'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></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-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: data,
toolbarOptions: [ 'ExcelExport'],
selectionOption: {type: 'Multiple', enableSimpleMultiRowSelection: true}
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
var selectedRecords = this.$refs.grid.getSelectedRecords();
let exportProperties = {
dataSource: selectedRecords
};
this.$refs.grid.excelExport(exportProperties);
}
},
provide: {
grid: [Toolbar, ExcelExport]
},
}
</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>Exporting grouped records
The Grid component provides an outline option for grouped records, allowing you to hide detailed data for better viewing in the exported document. This feature is particularly useful when you need to share data that is grouped based on specific columns and maintain the grouping structure in the exported file.
To achieve this functionality, you need to enable grouping in the Grid by setting the allowGrouping property to true . Additionally, you need define the groupSettings.columns property to specify the columns by which you want to group the data.
The following example demonstrates how to export grouped records to an Excel document when a toolbar item is clicked:
<template>
<div id="app">
<ejs-grid ref='grid' id="Grid" height='220px' :dataSource='data' :toolbar='toolbarOptions' :allowExcelExport='true'
:toolbarClick='toolbarClick' :allowPaging='true' :allowGrouping='true' :groupSettings='groupOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport, Group, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = [ 'ExcelExport'];
const groupOptions = { columns: ['CustomerID', 'ShipCity'] };
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
grid.value.excelExport();
}
}
provide('grid', [Toolbar, ExcelExport, Group, Page]);
</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>
<div id="app">
<ejs-grid ref='grid' id="Grid" height='220px' :dataSource='data' :toolbar='toolbarOptions' :allowExcelExport='true'
:toolbarClick='toolbarClick' :allowPaging='true' :allowGrouping='true' :groupSettings='groupOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Group, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: data,
toolbarOptions: [ 'ExcelExport'],
groupOptions : { columns: ['CustomerID', 'ShipCity'] }
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.$refs.grid.excelExport();
}
},
provide: {
grid: [Toolbar, ExcelExport, Group, Page]
},
}
</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>Export with hidden columns
Exporting hidden columns in the Syncfusion Vue Grid allows you to include hidden columns in the exported Excel document. This feature is useful when you have columns that are hidden in the UI but still need to be included in the exported document.
To export hidden columns of the grid to a Excel or CSV file, you need to set the includeHiddenColumn property as true in the excelExportProperties property.
The following example demonstrates how to export hidden columns to a Excel file. In this example, the ShipCity column, which is not visible in the UI, is exported to the Excel document. You can also export the grid by changing the excelExportProperties.includeHiddenColumn property based on the switch toggle using the checked property of the EJ2 Toggle Switch Button component.
<template>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
Include or exclude hidden columns
</label>
<ejs-switch id='switch' ref='switchRef'></ejs-switch>
</div>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions'
height='270px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=130></e-column>
<e-column field='ShipCity' headerText='Ship City' width=120 :visible='false'></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent as EjsSwitch } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
const grid = ref(null);
const switchRef = ref(null)
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
includeHiddenColumn: switchRef.value.$el.checked
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<div style="display: flex;">
<label style="margin-right:5px">
Include or exclude hidden columns
</label>
<ejs-switch id="switch" ref='switch'></ejs-switch>
</div>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions'
height='270px' :allowExcelExport='true' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=130></e-column>
<e-column field='ShipCity' headerText='Ship City' width=120 :visible='false'></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { SwitchComponent } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-switch":SwitchComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
includeHiddenColumn: this.$refs.switch.$el.checked
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Show or hide columns while exporting
The Grid component provides the functionality to show or hide columns dynamically during the export process. This feature allows you to selectively display or hide specific columns based on your requirements.
To show or hide columns based on user interaction during the export process, you can follow these steps:
-
Handle the toolbarClick event of the Grid component.
-
Update the visibility of the desired columns by setting the visible property of the column to true or false.
-
Export the grid to Excel.
-
Handle the excelExportComplete event to restore the column visibility to its original state.
In the following example, the CustomerID is initially a hidden column in the grid. However, during the export process, the CustomerID column is made visible, while the ShipCity column is hidden.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' :visible='false' 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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') {
grid.value.getColumns()[1].visible = true;
grid.value.getColumns()[3].visible = false;
grid.value.excelExport();
}
}
const excelExportComplete = (args) => {
grid.value.getColumns()[1].visible = true;
grid.value.getColumns()[3].visible = true;
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' :visible='false' 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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') {
this.$refs.grid.getColumns()[1].visible = true;
this.$refs.grid.getColumns()[3].visible = false;
this.$refs.grid.excelExport();
}
},
excelExportComplete(args) {
this.$refs.grid.getColumns()[1].visible = true;
this.$refs.grid.getColumns()[3].visible = true;
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Show or hide columns while exporting with stacked header
The Syncfusion Vue Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.
To implement the show or hide columns feature during Excel export in the Grid, follow these steps:
-
Handle the toolbarClick event of the Grid.
-
Update the visibility of the desired columns by setting the visible property of the column to true or false.
-
Export the Grid to Excel document using the excelExport or csvExport method.
-
Handle the excelExportComplete event to restore the column visibility to its original state.
In the following example, the ShipName is initially a hidden column in the Grid. However, during the Excel export process, the ShipName column is made visible, while the OrderDate column is hidden:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column headerText='Order Details' :columns='orderColumns' textAlign="Center" width=150></e-column>
<e-column headerText='Ship Details' :columns='shipColumns' textAlign="Center" width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const orderColumns= [
{
field: 'OrderDate',
headerText: 'Order Date',
format: 'yMd',
width: 130,
textAlign: 'Right',
minWidth: 10,
},
{
field: 'Freight',
headerText: 'Freight ($)',
width: 120,
format: 'C1',
textAlign: 'Right',
minWidth: 10,
}];
const shipColumns= [
{
field: 'ShippedDate',
headerText: 'Shipped Date',
format: 'yMd',
textAlign: 'Right',
width: 150,
minWidth: 10,
},
{
field: 'ShipCountry',
headerText: 'Ship Country',
width: 150,
minWidth: 10,
},
{
field: 'ShipName',
headerText: 'Ship Name',
width: 150,
minWidth: 10,
visible:false
},
];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') {
grid.value.ej2Instances.columns[1].columns[0].visible = false;
grid.value.ej2Instances.columns[2].columns[2].visible = true;
grid.value.excelExport();
}
}
const excelExportComplete = function(args) {
grid.value.ej2Instances.columns[1].columns[0].visible = true;
grid.value.ej2Instances.columns[2].columns[2].visible = false;
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px'
:allowExcelExport='true' :excelExportComplete='excelExportComplete' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column headerText='Order Details' :columns='orderColumns' textAlign="Center" width=150></e-column>
<e-column headerText='Ship Details' :columns='shipColumns' textAlign="Center" width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport'],
orderColumns: [{
field: 'OrderDate',
headerText: 'Order Date',
format: 'yMd',
width: 130,
textAlign: 'Right',
minWidth: 10,
},
{
field: 'Freight',
headerText: 'Freight ($)',
width: 120,
format: 'C1',
textAlign: 'Right',
minWidth: 10,
}],
shipColumns: [
{
field: 'ShippedDate',
headerText: 'Shipped Date',
format: 'yMd',
textAlign: 'Right',
width: 150,
minWidth: 10,
},
{
field: 'ShipCountry',
headerText: 'Ship Country',
width: 150,
minWidth: 10,
},
{
field: 'ShipName',
headerText: 'Ship Name',
width: 150,
minWidth: 10,
visible:false
},
]
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') {
this.$refs.grid.ej2Instances.columns[1].columns[0].visible = false;
this.$refs.grid.ej2Instances.columns[2].columns[2].visible = true;
this.$refs.grid.excelExport();
}
},
excelExportComplete: function(args) {
this.$refs.grid.ej2Instances.columns[1].columns[0].visible = true;
this.$refs.grid.ej2Instances.columns[2].columns[2].visible = false;
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Enable filtering in the exported excel file
The Grid allows you to export data to Excel or CSV with filter options and also export only filtered records. This feature is especially beneficial when you need to share data with others while preserving the ability for them to filter and analyze the data in Excel or CSV.
To enable this feature, you should set the enableFilter property to true in the excelExportProperties object. Additionally, you need to set allowFiltering to true in the grid configuration. This property enables filtering in the grid.
The following example demonstrates how to export data with filter options to an Excel document when a toolbar item is clicked:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :allowFiltering='true' :toolbar='toolbarOptions'
height='270px' :allowExcelExport='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' :visible='false' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' 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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
enableFilter: true
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport, Filter]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :allowFiltering='true' :toolbar='toolbarOptions' height='270px' :allowExcelExport='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' :visible='false' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' 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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
enableFilter: true
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport, Filter]
}
}
</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>Define file name
The Syncfusion Vue Grid component allows you to specify a custom file name for the exported Excel or CSV document. This feature enables you to provide a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data.
To assign a custom file name for the exported document, you can set the fileName property of the excelExportProperties property to the desired file name.
The following example demonstrates how to define a file name using ExcelExportProperties.fileName property when exporting to Excel, based on the entered value as the file name.
<template>
<div id="app">
<div>
<label style="padding: 30px 17px 0 0">Enter file name: </label>
<ejs-textbox ref='textbox' type="textbox" placeholder="Enter file name" width="120"></ejs-textbox>
</div>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 setup>
import { provide,ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { TextBoxComponent as EjsTextbox } from '@syncfusion/ej2-vue-inputs';
import { data } from './datasource.js';
const grid = ref(null);
const textbox = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties = {
fileName: textbox.value.$el.value !== "" ? textbox.value.$el.value + '.xlsx' : 'new.xlsx'
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<div>
<label style="padding: 30px 17px 0 0">Enter file name: </label>
<ejs-textbox ref='textbox' type="textbox" placeholder="Enter file name" width="120"></ejs-textbox>
</div>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { TextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-textbox":TextBoxComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
fileName: this.$refs.textbox.$el.value !== "" ? this.$refs.textbox.$el.value + '.xlsx' : 'new.xlsx'
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Export the master detail grid
The export functionality within the master-detail grid feature of the Grid enables you to export not only the master grid but also the associated detail grid onto a single Excel sheet. This feature proves to be particularly valuable when dealing with hierarchical data represented by two grids in the exported Excel file, allowing for comprehensive analysis and management.
To export the master-detail grid on the same sheet, you need to set the multipleExport.type property of the excelExportProperties object to AppendToSheet. It also has an option to provide blank space between the grids. This blank space can be defined by using multipleExport.blankRows property.
The following example demonstrates how to export master detail grid to the same page in a Excel file when a toolbar item is clicked. The rowSelected event dynamically updates the detail grid based on the selected master record:
<template>
<div id="app">
<ejs-grid ref="mastergrid" :dataSource="masterData" id="masterGrid" :selectedRowIndex="1"
:toolbar="toolbar" :rowSelected="rowSelected" :toolbarClick="toolbarClick"
allowExcelExport="true" :exportGrids='exportGrids'>
<e-columns>
<e-column field="ContactName" headerText="Customer Name" width="150"></e-column>
<e-column field="CompanyName" headerText="Company Name" width="150"></e-column>
<e-column field="Address" headerText="Address" width="150"></e-column>
<e-column field="Country" headerText="Country" width="130"></e-column>
</e-columns>
</ejs-grid>
<div class="e-statustext">Showing orders of Customer: <b id="key"></b></div>
<ejs-grid ref="detailgrid" id='detailGrid' :allowSelection="false" allowExcelExport="true">
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-column>
<e-column field="Freight" headerText="Freight" format="C2" width="100" type="number"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="200"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
<e-column field="ShipAddress" headerText="Ship Address" width="200"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { customerData, data } from "./datasource.js";
const mastergrid = ref(null);
const detailgrid = ref(null);
const exportGrids= ['masterGrid', 'detailGrid'];
const names = ["AROUT", "BERGS", "BLONP", "CHOPS", "ERNSH"];
const toolbar = ["ExcelExport"];
const masterData = customerData.filter(function (e) {
return names.indexOf(e.CustomerID) !== -1;
})
const rowSelected = function (args) {
let selectedRecord = args.data;
detailgrid.value.dataSource = data.filter((record) => record.CustomerName === selectedRecord.ContactName).slice(0, 5);
document.getElementById("key").innerHTML = selectedRecord.ContactName;
}
const toolbarClick = function (args) {
if (args.item.id === 'masterGrid_excelexport') {
const appendExcelExportProperties = {
multipleExport: { type: "AppendToSheet", blankRows: 2 },
};
mastergrid.value.excelExport(appendExcelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref="mastergrid" :dataSource="masterData" id="masterGrid" :selectedRowIndex="1"
:toolbar="toolbar" :rowSelected="rowSelected" :toolbarClick="toolbarClick"
allowExcelExport="true" :exportGrids='exportGrids'>
<e-columns>
<e-column field="ContactName" headerText="Customer Name" width="150"></e-column>
<e-column field="CompanyName" headerText="Company Name" width="150"></e-column>
<e-column field="Address" headerText="Address" width="150"></e-column>
<e-column field="Country" headerText="Country" width="130"></e-column>
</e-columns>
</ejs-grid>
<div class="e-statustext">Showing orders of Customer: <b id="key"></b></div>
<ejs-grid ref="detailgrid" id='detailGrid' :allowSelection="false" allowExcelExport="true">
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-column>
<e-column field="Freight" headerText="Freight" format="C2" width="100" type="number"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="200"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column>
<e-column field="ShipAddress" headerText="Ship Address" width="200"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { customerData, data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
var names = ["AROUT", "BERGS", "BLONP", "CHOPS", "ERNSH"];
return {
toolbar: ["ExcelExport"],
masterData: customerData.filter(function (e) {
return names.indexOf(e.CustomerID) !== -1;
}),
exportGrids: ['masterGrid', 'detailGrid'],
};
},
methods: {
rowSelected: function (args) {
let selectedRecord = args.data;
this.$refs.detailgrid.dataSource = data.filter((record) => record.CustomerName === selectedRecord.ContactName).slice(0, 5);
document.getElementById("key").innerHTML = selectedRecord.ContactName;
},
toolbarClick: function (args) {
if (args.item.id === 'masterGrid_excelexport') {
const appendExcelExportProperties = {
multipleExport: { type: "AppendToSheet", blankRows: 2 },
};
this.$refs.mastergrid.excelExport(appendExcelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport],
}
};
</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>Customizing columns on export
The Grid component allows you to customize the appearance of grid columns in your exported Excel or CSV documents. This feature empowers you to tailor specific column attributes such as field, header text, and text alignment, ensuring that your exported Excels align perfectly with your design and reporting requirements.
To customize the grid columns, you can follow these steps:
-
Access the excelExportProperties.column of the Grid component.
-
Set the
columnobject with attributes such asfield,headerText, andtextAlignto define the desired format. -
Trigger the Excel or CSV export operation to apply the customized column settings.
The following example demonstrates how to customize the grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: OrderID with textAlign set to Right, CustomerID with headerText as Customer Name, and Freight with a center-aligned textAlign property, which is not rendered in the grid columns:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions'
height='270px' :allowExcelExport='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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
var excelExportColumns = [
{ field: 'OrderID', textAlign: 'Right', width: '90' },
{ field: 'CustomerID', headerText: 'Customer Name', width: '100' },
{ field: 'Freight', textAlign: 'Center', width: '80' },
];
let excelExportProperties = {
columns: excelExportColumns
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
var excelExportColumns = [
{ field: 'OrderID', textAlign: 'Right', width: '90' },
{ field: 'CustomerID', headerText: 'Customer Name', width: '100' },
{ field: 'Freight', textAlign: 'Center', width: '80' },
];
let excelExportProperties = {
columns: excelExportColumns
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Font and color customization
The Excel export feature in Grid provides an option to include themes for the exported Excel document. This feature is particularly useful when you want to maintain a consistent and visually appealing style for the exported data in Excel.
To apply a theme to the exported Excel document, you can define the theme property within the excelExportProperties. This property allows you to specify the theme to be used in the exported Excel file, including styles for the caption, header, and record content.
caption: This property defines the theme style for the caption content in the exported Excel document. The caption is the title or description that appears at the top of the exported Excel sheet.
header: This property is used to defines the style for the header content in the exported Excel document. The header corresponds to the column headers in the Grid.
record: This property defines the theme style for the record content in the exported Excel document. The record represents the data rows in the Grid that are exported to Excel.
In the following example, apply font styling to the caption, header, and record in the Excel file using the theme property:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function (args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>By default, material theme is applied to exported excel document.
Rotate a header text in the exported grid
The Grid provides support to customize the column header styles, such as changing the text orientation, font color, and more, in the exported Excel file. This feature is useful when you want to enhance the visual appearance of the exported data and provide a unique representation of the Grid in the Excel document.
To achieve this requirement, use the excelHeaderQueryCellInfo event of the Grid. This event is triggered when creating a column header for the Excel document to be exported. By customizing the column header within this event, you can easily rotate the header text to a certain degree in the exported Grid, making the data presentation in the Excel document more visually appealing and tailored to your specific requirements.
In the following demo, using the rotation property of the style argument in the excelHeaderQueryCellInfo event, you can rotate the header text of the column header in the excel exported document.
<template>
<div id="app">
<label>Select a degree:</label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' :dataSource='degree' placeholder='Select a degree' width="150"></ejs-dropdownlist>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :created='setHeaderHeight' height='240px'
:toolbar='toolbarOptions' :allowExcelExport='true' :excelQueryCellInfo='excelQueryCellInfo'
:toolbarClick='toolbarClick' :excelHeaderQueryCellInfo='excelHeaderQueryCellInfo'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :customAttributes='customAttributes'></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
const grid = ref(null);
const dropdown = ref(null);
const customAttributes = {class : 'orientationcss'};
const toolbarOptions = ['ExcelExport'];
const degree = [90, 180, 45, 135];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') {
grid.value.excelExport();
}
}
const setHeaderHeight = function() {
let textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
let headerCell = document.querySelectorAll(".e-headercell");
for (let i = 0; i < headerCell.length; i++) {
(headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
}
}
const excelQueryCellInfo = (args) => {
if (args.column.field == 'Freight') {
if (args.value < 30) {
args.style = { backColor: '#99ffcc' };
}
else if (args.value < 60) {
args.style = { backColor: '#ffffb3' };
}
else {
args.style = { backColor: '#ff704d' };
}
}
}
const excelHeaderQueryCellInfo = (args) => {
let textWidth = document.querySelector(".orientationcss > div").scrollWidth;
if (args.gridCell.column.field == 'Freight') {
args.style = { backColor: '#99ffcc', vAlign: 'Bottom' };
}
else {
args.style = { vAlign: 'Center', rotation: dropdown.value.$el.value };
}
args.cell.cellHeight = textWidth;
}
provide('grid', [Toolbar, ExcelExport]);
</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";
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
padding-top:5px;
}
</style><template>
<div id="app">
<label>Select a degree:</label>
<ejs-dropdownlist ref='dropdown' id='dropdownlist' :dataSource='degree' placeholder='Select a degree' width="150"></ejs-dropdownlist>
<ejs-grid style='margin-top:10px' ref='grid' id='Grid' :dataSource='data' :created='setHeaderHeight' height='240px'
:toolbar='toolbarOptions' :allowExcelExport='true' :excelQueryCellInfo='excelQueryCellInfo'
:toolbarClick='toolbarClick' :excelHeaderQueryCellInfo='excelHeaderQueryCellInfo'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :customAttributes='customAttributes'></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' format='C2' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-dropdownlist":DropDownListComponent,
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: data,
customAttributes : {class : 'orientationcss'},
toolbarOptions: ['ExcelExport'],
degree : [90, 180, 45, 135]
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') {
this.$refs.grid.excelExport();
}
},
setHeaderHeight: function() {
let textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
let headerCell = document.querySelectorAll(".e-headercell");
for (let i = 0; i < headerCell.length; i++) {
(headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
}
},
excelQueryCellInfo(args) {
if (args.column.field == 'Freight') {
if (args.value < 30) {
args.style = { backColor: '#99ffcc' };
}
else if (args.value < 60) {
args.style = { backColor: '#ffffb3' };
}
else {
args.style = { backColor: '#ff704d' };
}
}
},
excelHeaderQueryCellInfo(args) {
let textWidth = document.querySelector(".orientationcss > div").scrollWidth;
if (args.gridCell.column.field == 'Freight') {
args.style = { backColor: '#99ffcc', vAlign: 'Bottom' };
}
else {
args.style = { vAlign: 'Center', rotation: this.$refs.dropdown.$el.value };
}
args.cell.cellHeight = textWidth;
},
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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";
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
padding-top:5px;
}
</style>Conditional cell formatting
When exporting data from the Grid, you have an option to conditionally format the cells in the exported Excel document. This allows you to customize the appearance of specific cells based on their values or other criteria.
To achieve this feature, you need to use the excelQueryCellInfo event of the Grid component. This event is triggered for each cell during the export process to Excel. Within this event, you can access the cell object using the args.cell property and modify its properties, such as the background color, based on your desired conditions.
The following example demonstrate how to customize the background color of the Freight column in the exported Excel document using the args.cell and backgroundColor properties of the excelQueryCellInfo event.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true'
:queryCellInfo='queryCellInfo' :excelQueryCellInfo='excelQueryCellInfo' :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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function (args) {
if (args.item.id === 'Grid_excelexport') {
grid.value.excelExport();
}
}
const excelQueryCellInfo = (args) => {
if (args.column.field == 'Freight')
if (args.value < 30) {
args.style = { backColor: '#99ffcc' };
}
else if (args.value < 60) {
args.style = { backColor: '#ffffb3' };
}
else {
args.style = { backColor: '#ff704d' };
}
}
const 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, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='272px' :allowExcelExport='true'
:queryCellInfo='queryCellInfo' :excelQueryCellInfo='excelQueryCellInfo' :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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') {
this.$refs.grid.excelExport();
}
},
excelQueryCellInfo(args) {
if(args.column.field == 'Freight')
if(args.value < 30) {
args.style = {backColor: '#99ffcc'};
}
else if(args.value < 60) {
args.style = {backColor: '#ffffb3'};
}
else {
args.style = {backColor: '#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, ExcelExport]
}
}
</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>Adding header and footer in the exported Excel file
The Excel or CSV Export feature in Grid component allows you to include header and footer content in the exported Excel or CSV document. This feature is particularly useful when you want to add additional information or branding to the exported Excel or CSV file.
To achieve this, you can use toolbarClick event along with defining the header and footer properties in the excelExportProperties object allowing you to customize the header and footer content.
The following example demonstrates how to add a header and footer to the exported grid:
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
header: {
headerRows: 7,
rows: [
{ cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
]
},
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
]
}
};
grid.value.excelExport(excelExportProperties);
}
}
provide('grid', [Toolbar, ExcelExport]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='270px'
:allowExcelExport='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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport']
};
},
methods: {
toolbarClick: function(args) {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
let excelExportProperties = {
header: {
headerRows: 7,
rows: [
{ cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
{ cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
]
},
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
]
}
};
this.$refs.grid.excelExport(excelExportProperties);
}
}
},
provide: {
grid: [Toolbar, ExcelExport]
}
}
</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>Export grid as blob
The Grid offers an option to export the data as a Blob instead of downloading it as a file in the browser. To export the grid as a Blob, set the isBlob parameter to true in the excelExport method. The grid returns the promise of a blob in the excelExportComplete event.
The following example demonstrates how to obtain the blob data of the exported grid by executing the promise in the excelExportComplete event.
<template>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='220px' :allowPaging='true' :allowExcelExport='true' :toolbarClick='toolbarClick' :excelExportComplete="excelExportComplete">
<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 setup>
import { provide, ref } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Toolbar, ExcelExport, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const grid = ref(null);
const toolbarOptions = ['ExcelExport', 'CsvExport'];
const toolbarClick = (args) => {
if (args.item.id === 'Grid_excelexport') {
// pass fourth parameter as true to get the blob data of exported grid
grid.value.excelExport(null, null, null, true);
}
if (args.item.id === 'Grid_csvexport') {
// pass fourth parameter as true to get the blob data of exported grid
grid.value.csvExport(null, null, null, true);
}
}
const excelExportComplete = (args) => {
// execute the promise to get the blob data
args.promise.then((e) => {
exportBlob(e.blobData);
});
};
const exportBlob = (blob) => {
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(blob); // Fix typo here
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url); // Fix typo here
document.body.removeChild(a);
}
provide('grid', [Toolbar, ExcelExport, Page]);
</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>
<div id="app">
<ejs-grid ref='grid' id='Grid' :dataSource='data' :toolbar='toolbarOptions' height='220px' :allowPaging='true' :allowExcelExport='true' :toolbarClick='toolbarClick' :excelExportComplete="excelExportComplete">
<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 { GridComponent, ColumnsDirective, ColumnDirective, Toolbar, ExcelExport, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
toolbarOptions: ['ExcelExport', 'CsvExport']
};
},
methods: {
toolbarClick(args) {
if (args.item.id === 'Grid_excelexport') {
// pass fourth parameter as true to get the blob data of exported grid
this.$refs.grid.excelExport(null, null, null, true);
}
if (args.item.id === 'Grid_csvexport') {
// pass fourth parameter as true to get the blob data of exported grid
this.$refs.grid.csvExport(null, null, null, true);
}
},
excelExportComplete(args) {
// execute the promise to get the blob data
args.promise.then((e) => {
this.exportBlob(e.blobData);
});
},
exportBlob(blob){
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(blob); // Fix typo here
a.href = url;
a.download = 'Export';
a.click();
window.URL.revokeObjectURL(url); // Fix typo here
document.body.removeChild(a);
}
},
provide: {
grid: [Toolbar, ExcelExport, Page]
}
}
</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>