Перейти к основному содержимому

Экспорт и импорт для Excel

Библиотека dhtmlxGantt позволяет экспортировать данные из диаграммы Gantt в формат Excel. Вы также можете импортировать данные в Gantt из Excel-файла. Чтобы экспортировать данные в формат iCal, см. Экспорт в iCal.

заметка

Онлайн-сервис экспорта бесплатный. Условия лицензии см. в разделе Лицензия и водяной знак.

Существует несколько сервисов экспорта. Их можно установить на вашем компьютере и локально экспортировать диаграмму Gantt в Excel. Обратите внимание, что сервисы экспорта не входят в пакет Gantt; прочитайте соответствующую статью, чтобы узнать условия использования каждого из них.

Ограничения онлайн-сервиса экспорта​

заметка

У онлайн-сервиса экспорта есть ограничения по времени и размеру запроса. См. Ограничения онлайн-сервиса экспорта.

Использование модулей экспорта​

Чтобы экспортировать большие диаграммы, экспортировать без ограничений онлайн-сервиса экспорта или хранить данные в своей сети, установите модуль экспорта на собственный сервер. Подробнее об использовании модуля экспорта для PDF, PNG, Excel и iCal.

Экспорт в Excel​

Чтобы экспортировать данные из диаграммы Gantt в документ Excel, выполните следующее:

  • Чтобы использовать функциональность экспорта/импорта, включите плагин export_api через метод plugins:
gantt.plugins({
    export_api: true
});

Это позволяет использовать либо онлайн-сервис экспорта, либо локальный модуль экспорта.

заметка

Если вы используете версию Gantt старше 8.0, вам нужно подключить https://export.dhtmlx.com/gantt/api.js на вашей странице, чтобы включить функциональность экспорта, например:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
  • Вызовите метод exportToExcel для экспорта данных из диаграммы Gantt:
<input value="Export to Excel" type="button" onclick='gantt.exportToExcel()'/>

<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Связанный пример: Export data : MS Project, PrimaveraP6, Excel & iCal

Связанный пример: Export data: store online

Параметры метода экспорта​

Метод exportToExcel() принимает в качестве параметра объект с несколькими свойствами (все свойства являются необязательными):

  • name - (string) задаёт имя выходного файла с расширением '.xlsx'
  • columns - (array) позволяет настраивать столбцы выходной таблицы Excel. Свойства объектов столбцов:
    • 'id' - (string,number) свойство события, которое будет сопоставлено столбцу
    • 'header' - (string) заголовок столбца
    • 'width' - (number) ширина столбца в пикселях
    • 'type' - (string) тип столбца
  • server - (string) задаёт конечную точку API для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию: https://export.dhtmlx.com/gantt
  • raw - (boolean) определяет способ экспорта данных Gantt. По умолчанию false. Подробнее см. в разделе Экспорт отфильтрованных задач и скрытых столбцов
  • callback - (function) если вы хотите получить URL для загрузки сгенерированного файла XLSX, можно использовать свойство callback. Оно получает JSON-объект с полем url
  • visual - (boolean) добавляет на экспортируемый документ Excel шкалу времени. По умолчанию false
  • cellColors - (boolean) если установить в true, ячейки экспортируемого документа будут иметь цвета, определённые шаблоном timeline_cell_class, экспортируются свойства color и background-color
  • data - (object) задаёт произвольный источник данных, который будет представлен в экспортируемой диаграмме Gantt
  • date_format - (string) задаёт формат отображения даты в экспортируемом документе Excel. Полный список доступных кодов формата можно посмотреть здесь.
Вызов метода экспорта с необязательными свойствами
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"
});

Значения даты по умолчанию​

Модуль экспорта ожидает, что столбцы start_date и end_date будут иметь тип Date, а столбец duration — тип number.

В случае применения пользовательских шаблонов, необходимо либо вернуть значение нужного типа, либо определить другое значение в свойстве name конфигурации столбца. Например:

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); 
        }
    },
    ...
];

Иначе данные Gantt не будут экспортированы. Посмотрите соответствующий пример.

Установка пользовательского источника данных для экспорта​

Чтобы экспортировать диаграмму Gantt с набором пользовательских данных (то есть не теми данными, что отображаются в исходной диаграмме Gantt), используйте свойство data в параметре метода exportToExcel:

gantt.exportToExcel({   
    name: "document.xlsx", 
    data: [
        { id: 1, text: "Project #1", start_date: "01-04-2026", duration: 18},
        { id: 2, text: "Task #1", start_date: "02-04-2026", duration: 8, parent: 1},
        { id: 3, text: "Task #2", start_date: "11-04-2026", duration: 8, parent: 1}
    ]      
});
заметка

Обратите внимание, что нельзя указать в качестве значения параметра data какой-либо URL, допускается только объект данных.

Добавление цветов задач в экспорт​

Вы можете добавить цвета задач в экспортируемый файл Excel диаграммы Gantt, установив значение свойства visual в "base-colors":

gantt.exportToExcel({
    visual: "base-colors", 
    cellColors: true
})

Связанный пример: Export colors of tasks

Экспорт отфильтрованных задач и скрытых столбцов​

По умолчанию метод exportToExcel() экспортирует все задачи и столбцы диаграммы Gantt независимо от фильтрации, применённой через событие onBeforeTaskDisplay, и от столбцов, скрытых настройкой hide:true.

Чтобы в экспорт не попадали задачи, отфильтрованные через onBeforeTaskDisplay, установите для свойства raw значение true:

gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
    // hide tasks that don't match the search value
    return task.text.toLowerCase().indexOf(filterValue.toLowerCase()) > -1;
});

gantt.exportToExcel({
    raw: true
});

Связанный пример: Gantt. Export filtered data to PDF, Excel, and MSProject files

Аналогично, чтобы исключить столбцы, скрытые настройкой hide:true, установите для свойства raw значение true:

gantt.config.columns = [
    { name: "text", tree: true, width: 150, resize: true },
    { name: "start_date", align: "center", width: 120, resize: true },
    // hidden columns are excluded from the export when raw: true
    { name: "end_date", align: "center", label: "End Time", hide: true, width: 120, resize: true },
    { name: "duration", align: "center", width: 70, hide: true, resize: true }
];

gantt.exportToExcel({
    raw: true
});

Связанный пример: Gantt. Export to Excel. Hide grid columns with the raw mode

Импорт из Excel​

Поскольку автоматическое сопоставление произвольных столбцов Excel-документа с моделью данных Gantt невозможно, сервис экспорта преобразует документ в массив строк, который возвращается в JSON. Преобразование полученного документа в данные Gantt — задача конечного разработчика.

Чтобы преобразовать Excel-файл, необходимо отправить следующий запрос в сервис экспорта:

  • Request URL - https://export.dhtmlx.com/gantt
  • Request Method - POST
  • Content-Type - multipart/form-data

Параметры запроса:

  • file - Excel-файл
  • type - "excel-parse"
  • data - (optional) JSON-строка с настройками

Например:

<form action="https://export.dhtmlx.com/gantt" method="POST" 
    encType="multipart/form-data">
    <input type="file" name="file" />
    <input type="hidden" name="type" value="excel-parse"/>
    <button type="submit">Get</button>
</form>

Либо можно использовать клиентский API:

gantt.importFromExcel({
    server: "https://export.dhtmlx.com/gantt",
    data: file,
    callback: (project) => {
        console.log(project)
    }
});

Связанный пример: Импорт Excel файла

Где file — экземпляр File, который должен содержать Excel (xlsx) файл.

заметка

gantt.importFromExcel требует поддержки HTML5 File API.

Ответ​

Ответ будет содержать JSON-массива объектов:

[
   { "Name": "Task Name", "Start": "2026-04-11 10:00", "Duration": 8 },
   ...
]

где:

  • Значения первой строки используются как имена свойств импортируемых объектов.
  • Каждая строка сериализуется как отдельный объект.
  • Даты сериализуются в формате "%Y-%m-%d %H:%i".

Настройки импорта​

  • Сервис импорта ожидает, что первая строка импортируемого листа будет заголовочной строкой, содержащей имена столбцов.
  • По умолчанию сервис возвращает первый лист документа. Чтобы вернуть другой лист, используйте параметр sheet (нумерация с нуля)
gantt.importFromExcel({
    server: "https://export.dhtmlx.com/gantt",
    data: file,
    sheet: 2, // выводя третий лист
    callback: (rows) => {}
});

Экспорт в iCal​

Экспорт в iCal описан в статье Экспорт в iCal.

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support