Multiple Gantt exporting in Vue Gantt Chart Component

18 Nov 201824 minutes to read

The Gantt Chart component provides support for exporting multiple Gantt Chart instances into Excel. You can export them either into a single sheet or multiple sheets based on your requirements.

Same sheet

The Excel export feature allows exporting multiple Gantt Chart data sets into the same sheet. To export them in the same sheet, set multipleExport.type to AppendToSheet in the ExcelExportProperties.
You can also add blank rows between exported Gantt Chart data by defining the multipleExport.blankRows property.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :allowExcelExport='true' :height="height2" :treeColumnIndex="1"></ejs-gantt>  
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';
const gantt1 = ref(null);
const gantt2 = ref(null);
const fData = [ganttData[0]];
const sData = [ganttData[1]];
const height1 = '280px';
const height2 = '250px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['ExcelExport'];
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/14/2019');
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer1_excelexport') {
            var appendExcelExportProperties = {
                multipleExport: {type: 'AppendToSheet',blankRows: 2}
            };
            var FirstGantt = gantt1.value.ej2Instances;
            var FirstGanttExport =  FirstGantt.excelExport(appendExcelExportProperties,true);
            FirstGanttExport.then((fData) => {
                var SecondGantt = dgantt2.value.ej2Instances;
                SecondGantt.excelExport(appendExcelExportProperties,false,fData);
            });
        }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :allowExcelExport='true' :height="height2" :treeColumnIndex="1"></ejs-gantt>  
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        fData: [ganttData[0]],
        sData: [ganttData[1]],
        height1:'280px',
        height2:'250px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport'],
        projectStartDate: new Date('03/31/2019'),
        projectEndDate: new Date('04/14/2019'),
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer1_excelexport') {
                    var appendExcelExportProperties = {
                        multipleExport: {type: 'AppendToSheet',blankRows: 2}
                    };
                    var FirstGantt = document.getElementById('GanttContainer1').ej2_instances[0];
                    var FirstGanttExport =  FirstGantt.excelExport(appendExcelExportProperties,true);
                    FirstGanttExport.then((fData) => {
                        var SecondGantt = document.getElementById('GanttContainer2').ej2_instances[0];
                        SecondGantt.excelExport(appendExcelExportProperties,false,fData);
                    });
                }
        },
        };
  },
  provide: {
    gantt: [Toolbar, ExcelExport]
  }
};
</script>

By default, the value of multipleExport.blankRows is 5.

New sheet

The Excel export feature also allows exporting multiple Gantt Chart instances into separate sheets. To export each Gantt Chart in a new sheet, set multipleExport.type to NewSheet in the ExcelExportProperties.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :allowExcelExport='true' :height="height2" :treeColumnIndex="1"></ejs-gantt>  
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';
const gantt1 = ref(null);
const gantt2 = ref(null);
const fData = [ganttData[0]];
const sData = [ganttData[1]];
const height1 = '280px';
const height2 = '250px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['ExcelExport'];
const projectStartDate = new Date('03/31/2019');
const projectEndDate = new Date('04/14/2019');
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer1_excelexport') {
            var appendExcelExportProperties = {
                multipleExport: {type: 'AppendToSheet',blankRows: 2}
            };
            var FirstGantt = gantt1.value.ej2Instances;
            var FirstGanttExport =  FirstGantt.excelExport(appendExcelExportProperties,true);
            FirstGanttExport.then((fData) => {
                var SecondGantt = gantt2.value.ej2Instances;
                SecondGantt.excelExport(appendExcelExportProperties,false,fData);
            });
        }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
     <p><b>First Gantt:</b></p>
        <ejs-gantt ref='gantt1' id="GanttContainer1" :dataSource="fData" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height1" :treeColumnIndex="1" :projectStartDate="projectStartDate" :projectEndDate="projectEndDate"></ejs-gantt>
    <p><b>Second Gantt:</b></p>
        <ejs-gantt ref='gantt2' id="GanttContainer2" :dataSource="sData" :taskFields="taskFields" :allowExcelExport='true' :height="height2" :treeColumnIndex="1"></ejs-gantt>  
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';
export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        fData: [ganttData[0]],
        sData: [ganttData[1]],
        height1:'280px',
        height2:'250px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport'],
        projectStartDate: new Date('03/31/2019'),
        projectEndDate: new Date('04/14/2019'),
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer1_excelexport') {
                    var appendExcelExportProperties = {
                        multipleExport: {type: 'NewSheet'}
                    };
                    var FirstGantt = document.getElementById('GanttContainer1').ej2_instances[0];
                    var FirstGanttExport =  FirstGantt.excelExport(appendExcelExportProperties,true);
                    FirstGanttExport.then((fData) => {
                        var SecondGantt = document.getElementById('GanttContainer2').ej2_instances[0];
                        SecondGantt.excelExport(appendExcelExportProperties,false,fData);
                    });
                }
        },
        };
  },
  provide: {
    gantt: [Toolbar, ExcelExport]
  }
};
</script>

Customize the Excel export

The Gantt Chart Excel export supports several customization options to tailor the exported document to your needs.

Export hidden columns

You can export hidden columns by setting the includeHiddenColumn property to true.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const columns = [
    { field: 'TaskID', headerText:  'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText:  'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
    { field: 'Duration',headerText: 'Duration', width: '150'},
    { field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['ExcelExport', 'CsvExport'];
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer_excelexport') {
            var excelExportProperties = {
                dataSource: ganttData[1]
            };
            var ganttObj = gantt.value.ej2Instances;
            ganttObj.excelExport(excelExportProperties);
        }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        columns: [
            { field: 'TaskID', headerText:  'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText:  'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
            { field: 'Duration',headerText: 'Duration', width: '150'},
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
        toolbar: ['ExcelExport', 'CsvExport'],
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var excelExportProperties = {
                        includeHiddenColumn: true
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.excelExport(excelExportProperties);
                } else if(args.item.id === 'GanttContainer_csvexport') {
                    var excelExportProperties = {
                        includeHiddenColumn: true
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.csvExport(excelExportProperties);
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

Show or hide columns during export

During Excel export, you can dynamically show or hide columns using the https://ej2.syncfusion.com/vue/documentation/api/gantt#toolbarclick and https://ej2.syncfusion.com/vue/documentation/api/gantt#excelexportcomplete events.

In the toolbarClick event, use the args.item.id property to modify column.visible to show or hide columns.
In the excelExportComplete event, you can revert the columns to their original visibility.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns"
        :toolbar="toolbar" :toolbarClick="toolbarClick" :excelExportComplete="excelExportComplete" :allowExcelExport='true'
        :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const columns = [
    { field: 'TaskID', headerText:  'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText:  'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
    { field: 'Duration',headerText: 'Duration', width: '150'},
    { field: 'Progress', headerText: 'Progress', width: '150' },
];
const toolbar = ['ExcelExport', 'CsvExport'];
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer_excelexport') {
            var ganttObj = gantt.value.ej2Instances;
            ganttObj.treeGrid.grid.columns[0].visible = true;
            ganttObj.treeGrid.grid.columns[3].visible = false;
            ganttObj.excelExport();
        } else if(args.item.id === 'GanttContainer_csvexport') {
            var ganttObj = gantt.value.ej2Instances;
            ganttObj.treeGrid.grid.columns[0].visible = true;
            ganttObj.treeGrid.grid.columns[3].visible = false;
            ganttObj.csvExport();
        }
    };
const excelExportComplete = () => {
    var ganttObj = gantt.value.ej2Instances;
    ganttObj.treeGrid.grid.columns[0].visible = false;
    ganttObj.treeGrid.grid.columns[3].visible = true;
};
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :columns="columns"
        :toolbar="toolbar" :toolbarClick="toolbarClick" :excelExportComplete="excelExportComplete" :allowExcelExport='true'
        :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        columns: [
            { field: 'TaskID', headerText:  'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText:  'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
            { field: 'Duration',headerText: 'Duration', width: '150'},
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ],
        toolbar: ['ExcelExport', 'CsvExport'],
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.treeGrid.grid.columns[0].visible = true;
                    ganttObj.treeGrid.grid.columns[3].visible = false;
                    ganttObj.excelExport();
                } else if(args.item.id === 'GanttContainer_csvexport') {
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.treeGrid.grid.columns[0].visible = true;
                    ganttObj.treeGrid.grid.columns[3].visible = false;
                    ganttObj.csvExport();
                }
            },
        excelExportComplete: () => {
            var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
            ganttObj.treeGrid.grid.columns[0].visible = false;
            ganttObj.treeGrid.grid.columns[3].visible = true;
        },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

Cell formatting during export

You can customize the TreeGrid cells in the exported document using the https://ej2.syncfusion.com/vue/documentation/api/gantt#excelquerycellinfo event.
In this event, you can apply conditional formatting to Excel and CSV exports.

In the example below, the background color is customized for the TaskID column using the args.style.backColor property.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :excelQueryCellInfo="excelQueryCellInfo" :queryCellInfo="queryCellInfo" :queryTaskbarInfo = "queryTaskbarInfo" :allowExcelExport='true' :height="height" :treeColumnIndex="1" :columns = "columns" :labelSettings="labelSettings" :splitterSettings= "splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const columns = [
    { field: 'TaskID', headerText:  'Task ID', textAlign: 'Left', width: '100',visible:false  },
    { field: 'TaskName', headerText:  'Task Name', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration',headerText: 'Duration', width: '150' }
];
const toolbar = ['ExcelExport'];
const labelSettings = {
    taskLabel: '${Progress}%'
};
const splitterSettings = {
    columnIndex: 3
};
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer_excelexport') {
            var ganttObj = gantt.value.ej2Instances;
            ganttObj.excelExport();
        }
    };
const excelQueryCellInfo = (args) => {
    if(args.column.field == 'Progress'){
        if(args.value > 80) {
            args.style = { backColor: '#A569BD' };
        }
        else if(args.value < 20) {
            args.style = { backColor: '#F08080' };
        }
    }
};
const queryTaskbarInfo = function(args) {
    if (args.data.Progress > 80) {
        args.progressBarBgColor = "#6C3483";
        args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
    } else if (args.data.Progress < 20) {
        args.progressBarBgColor = "#CD5C5C";
        args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
    }
};
const queryCellInfo = (args) => {
    if(args.column.field == 'Progress'){
        if(args.data.Progress > 80) {
            args.cell.style.backgroundColor  = '#A569BD';
        }
        else if(args.data.Progress < 20) {
            args.cell.style.backgroundColor  = '#F08080';
        }
    }  
};
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :excelQueryCellInfo="excelQueryCellInfo" :queryCellInfo="queryCellInfo" :queryTaskbarInfo = "queryTaskbarInfo" :allowExcelExport='true' :height="height" :treeColumnIndex="1" :columns = "columns" :labelSettings="labelSettings" :splitterSettings= "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport'],
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100',visible:false  },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' }
        ],
        labelSettings: {
            taskLabel: '${Progress}%'
        },
        splitterSettings: {
            columnIndex: 3
        },
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.excelExport();
                }
            },
        excelQueryCellInfo: (args) => {
            if(args.column.field == 'Progress'){
                if(args.value > 80) {
                    args.style = { backColor: '#A569BD' };
                }
                else if(args.value < 20) {
                    args.style = { backColor: '#F08080' };
                }
            }
        },
        queryTaskbarInfo: function(args) {
            if (args.data.Progress > 80) {
                args.progressBarBgColor = "#6C3483";
                args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
            } else if (args.data.Progress < 20) {
                args.progressBarBgColor = "#CD5C5C";
                args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
            }
        },
        queryCellInfo: (args) => {
            if(args.column.field == 'Progress'){
                if(args.data.Progress > 80) {
                    args.cell.style.backgroundColor  = '#A569BD';
                }
                else if(args.data.Progress < 20) {
                    args.cell.style.backgroundColor  = '#F08080';
                }
            }  
        },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

Theme

You can apply custom themes to the exported Excel document by defining the theme property in ExcelExportProperties.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height = "height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
        if (args.item.id === 'GanttContainer_excelexport') {
            var excelExportProperties = {
                theme:
                {
                    header: { fontName: 'Segoe UI', fontColor: '#666666' },
                    record: { fontName: 'Segoe UI', fontColor: '#666666' }
                }
            };
            var ganttObj = gantt.value.ej2Instances;
            ganttObj.excelExport(excelExportProperties);
        }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height = "height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport'],
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var excelExportProperties = {
                        theme:
                        {
                            header: { fontName: 'Segoe UI', fontColor: '#666666' },
                            record: { fontName: 'Segoe UI', fontColor: '#666666' }
                        }
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.excelExport(excelExportProperties);
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

By default, the Tailwind CSS v3 theme is applied to exported Excel files.

Add header and footer

You can include custom header and footer content in the exported Excel document.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
    if (args.item.id === 'GanttContainer_excelexport') {
                    var 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:[email protected]' }, 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 } }] }
                            ]
                        },
                    };
                    var ganttObj = gantt.value.ej2Instances;
                    ganttObj.excelExport(excelExportProperties);
                }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport'],
        toolbarClick: (args) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var 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:[email protected]' }, 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 } }] }
                            ]
                        },
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.excelExport(excelExportProperties);
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

File name for exported document

You can define a custom file name for the exported Excel document using the fileName property of the ExcelExportProperties.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';
const gantt = ref(null);
const data = ganttData;
const height = '450px';
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
};
const toolbar = ['ExcelExport'];
const toolbarClick = (args) => {
    if (args.item.id === 'GanttContainer_excelexport') {
                    var excelExportProperties = {
                        fileName:"Gantt.xlsx"
                    };
                    var ganttObj = gantt.value.ej2Instances;
                    ganttObj.excelExport(excelExportProperties);
                } else if(args.item.id === 'GanttContainer_csvexport') {
                    var excelExportProperties = {
                        fileName:"Gantt.csv"
                    };
                    var ganttObj = gantt.value.ej2Instances;
                    ganttObj.csvExport(excelExportProperties);
                }
    };
provide('gantt',  [Toolbar, ExcelExport]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :toolbar="toolbar" :toolbarClick="toolbarClick" :allowExcelExport='true' :height="height" :treeColumnIndex="1"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Toolbar, ExcelExport, Selection } from "@syncfusion/ej2-vue-gantt";
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ganttData } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent,

},

  data: function() {
      return{
        data: ganttData,
        height:'450px',
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        toolbar: ['ExcelExport', 'CsvExport'],
        toolbarClick: (args: ClickEventArgs) => {
                if (args.item.id === 'GanttContainer_excelexport') {
                    var excelExportProperties: ExcelExportProperties = {
                        fileName:"Gantt.xlsx"
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.excelExport(excelExportProperties);
                } else if(args.item.id === 'GanttContainer_csvexport') {
                    var excelExportProperties: ExcelExportProperties = {
                        fileName:"Gantt.csv"
                    };
                    var ganttObj = document.getElementById('GanttContainer').ej2_instances[0];
                    ganttObj.csvExport(excelExportProperties);
                }
            },
      };
  },
  provide: {
      gantt: [Toolbar, ExcelExport]
  }
};
</script>

Search docs

Ask Syncfusion AI Assistant