Skip to main content

exportToExcel

Description​

Exports data from the Gantt chart to an Excel document

exportToExcel: (export?: any) => void

Parameters​

  • export - object - optional, an object with export settings (see the details)

Example​

gantt.exportToExcel({
    name: "document.xlsx", 
    columns:[
        { id: "text",  header: "Title", width: 150 },
        { id: "start_date",  header: "Start date", width: 250, type: "date" }
    ],
    server: "https://myapp.com/myexport/gantt",
    callback: (res) => {
        alert(res.url);
    },
    visual: true,
    cellColors: true,
    data: { },
    date_format: "dddd d, mmmm yyyy"
});

Details​

note

This method is defined in the export extension, so you need to activate the export_api plugin. Read the details in the article.

note

If you use the Gantt version older than 8.0, you need to include the https://export.dhtmlx.com/gantt/api.js on your page to enable the online export service, e.g.:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

The exportToExcel() method takes as a parameter an object with several properties (all the properties are optional):

  • name - (string) sets the name of the output file with the extension '.xlsx'
  • columns - (array) allows configuring columns of the output Excel sheet. The properties of the column objects are:
    • 'id' - (string,number) a property of the event that will be mapped to the column
    • 'header' - (string) the column header
    • 'width' - (number) the column width in pixels
    • 'type' - (string) the column type
  • server - (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/gantt
  • callback - (function) If you want to receive an url to download a generated XLSX file, the callback property can be used. It receives a JSON object with the url property
  • visual - (boolean) adds the timeline chart to an exported Excel document; false by default. Read how to add task colors to the exported file
  • cellColors - (boolean) if set to true, the cells of the exported document will have the colors defined by the template, the color and background-color properties are exported
  • data - (object) sets a custom data source that will be presented in the output Gantt chart
  • date_format - (string) sets the format the date will be displayed in the exported Excel document. The following format code can be used:
table.my_table {
    width: 70%;
    padding: 0 20px;
}
table.my_table tr td {
    text-align: left;
    vertical-align: middle;
    width: 35%;
    border-bottom: 1px solid grey;
}
table.my_table td.version_info {
    text-align: left;
    font-weight: bold;
}

Format codeOutput:

Format codeOutput
d9
dd09
dddMon
ddddMonday
mm01
mmmJan
mmmmJanuary
mmmmmJ
yy12
yyyy2021
mm/dd/yyyy01/09/2021
m/d/y1/9/21
ddd, mmm dMon, Jan 9
mm/dd/yyyy h:mm AM/PM01/09/2021 6:20 PM
dd/mm/yyyy hh:mm:ss09/01/2012 16:20:00

Default date parameters​

The Export module expects the start_date and end_date columns to have the Date type and the duration column to have the number type.

In case of applying custom templates, it is necessary either to return a value of the expected type or to define a different value in the name property of the column configuration. For instance:

gantt.config.columns = [
    ...
    { name: "start_date", align: "center", width: 100, resize: true, 
        editor: start_dateEditor },
    { name: "end_date", align: "center", width: 100, resize: true, 
        editor: end_dateEditor },
    { name: "duration_formatted", 
        align: "center", width: 40, resize: true, 
        editor: durationEditor, 
        template: (task) => { 
            return formatter.format(task.duration_formatted); 
        }
    },
    ...
];

Otherwise, the Gantt data won't be exported. Check the related example.