Библиотека dhtmlxGantt позволяет без труда работать с данными диаграммы Ганта и MS Project. Вы можете экспортировать данные из диаграммы Ганта в MS Project, а также импортировать данные в диаграмму Ганта из MS Project.
Сервис бесплатен, но итоговый файл будет содержать водяной знак в соответствии с лицензией GPL. Если у вас есть действующая лицензия, экспорт будет без водяного знака в течение периода поддержки (12 месяцев для всех PRO лицензий).
Существует несколько сервисов экспорта, которые вы можете использовать. Вы можете установить их на свой компьютер для локального экспорта диаграммы Ганта в MS Project. Помните, что эти сервисы экспорта не являются частью пакета Gantt. Подробности их использования смотрите в соответствующей статье.
Сервис экспорта имеет некоторые ограничения по времени и размеру запроса.
Если экспорт занимает более 20 секунд, процесс будет остановлен, и вы увидите следующую ошибку:
Error: Timeout trigger 20 seconds
Когда несколько пользователей экспортируют одновременно, процесс может замедлиться. Однако время, затраченное на запрос экспорта каждого пользователя, учитывается отдельно.
Общий API-эндпоинт https://export.dhtmlx.com/gantt используется для всех методов экспорта (exportToPDF, exportToPNG, exportToMSProject и т.д.) с максимальным размером запроса 10 МБ.
Для экспорта/импорта, специфичного для MS Project, существует выделенный эндпоинт https://export.dhtmlx.com/gantt/project. Этот эндпоинт поддерживает файлы размером до 40 МБ и также работает для услуг Primavera P6.
Если ваша диаграмма большая, вы можете использовать автономный модуль экспорта. Модуль бесплатен, если у вас есть Commercial, Enterprise или Ultimate лицензия. Вы также можете приобрести модуль отдельно.
Подробнее об использовании модуля экспорта с MS Project читайте в этом руководстве.
Компонент Gantt поддерживает экспорт задач, связей и ресурсов в MS Project.
Чтобы экспортировать данные из диаграммы Ганта в MS Project:
gantt.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>
gantt.exportToMSProject для экспорта данных.gantt.exportToMSProject();
Этот метод отправляет запрос на удаленный сервис, который предоставит либо XML Project файл, либо URL для загрузки сгенерированного файла.
Related sample: Export data : MS Project, PrimaveraP6, Excel & iCal
Ответ представляет собой JSON-объект со следующей структурой:
{
data: {},
config: {},
resources: [],
worktimes: []
}
Метод exportToMSProject() принимает необязательный объект с различными свойствами:
gantt.exportToMSProject({
name: 'custom.xml'
});
gantt.exportToMSProject({
auto_scheduling: false
});
gantt.exportToMSProject({
skip_circular_links: false
});
gantt.exportToMSProject({
project: {
'Author': 'I am!',
'MinutesPerDay': function () {
return gantt.config.hours_per_day * 60;
}
}
});
Поддерживаемые свойства проекта перечислены здесь.
gantt.exportToMSProject({
tasks: {
'StartVariance': function (task) {
return task.startVariance || 0;
},
'PercentWorkComplete': function (task) {
return task.progress + 0.1;
},
'Custom': () => 'Custom value',
'Custom 2': 'My Custom value'
}
});
Поддерживаемые свойства задач перечислены здесь.
start_date и end_date должны включать и дату, и время в формате %d-%m-%Y %H:%i.
const customData = {
"data": [
{ "id": "10", "text": "Project #5", "start_date": "01-04-2025 00:00",
"duration": 3, "order": 10, "progress": 0.4, "open": true,
"end_date": "04-04-2025 00:00", "parent": 0
},
{ "id": "1", "text": "Task #67", "start_date": "02-04-2025 00:00",
"duration": 2, "order": 10, "progress": 0.6, "parent": "10",
"end_date": "04-04-2025 00:00"
},
{ "id": "2", "text": "Task #89", "start_date": "01-04-2025 00:00",
"duration": 2, "order": 20, "progress": 0.6, "parent": "10",
"end_date": "03-04-2025 00:00"
},
],
"links": [
{ "id": 1, "source": 1, "target": 2, "type": "1" },
]
};
gantt.exportToMSProject({
data: customData
});
Related sample: Gantt. Export custom data
gantt.exportToMSProject({
callback: function(res){
alert(res.url);
}
});
gantt.exportToMSProject({
resources: [
{"id":"1","name":"John","type":"work"},
{"id":"2","name":"Mike","type":"work"},
{"id":"3","name":"Anna","type":"work"}
]
});
Типы ресурсов могут быть "work", "cost" или "material". Назначьте ресурсы, используя свойство ResourceAssignments в конфигурации задачи:
var users = [
{key:'0', label: "N/A"},
{key:'1', label: "John"},
{key:'2', label: "Mike"},
{key:'3', label: "Anna"}
];
gantt.exportToMSProject({
resources: users
.filter(u => u.key !== '0')
.map(u => ({
id: u.key,
name: u.label,
type: "work"
})),
tasks: {
ResourceAssignments: (task) => task.user
}
});
Свойство ResourceAssignments может возвращать строку/число или массив таких значений:
tasks: {
ResourceAssignments: (task) => [task.user, task.office]
}
gantt.exportToMSProject({
server: "https://myapp.com/myexport/gantt"
});
Чтобы преобразовать XML или MPP файл MS Project, отправьте запрос в сервис экспорта:
Параметры:
Пример:
<form action="https://export.dhtmlx.com/gantt" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="type" value="msproject-parse">
<button type="submit">Get</button>
</form>
Или используйте клиентский API:
gantt.importFromMSProject({
data: file,
taskProperties: ["Notes", "Name"],
callback: function (project) {
if (project) {
gantt.clearAll();
if (project.config.duration_unit) {
gantt.config.duration_unit = project.config.duration_unit;
}
gantt.parse(project.data);
}
}
});
Related sample: Import MS Project file
Здесь file — это экземпляр File, содержащий XML или MPP файл Project.
gantt.importFromMSProject требует поддержки HTML5 File API.
Ответ структурирован как JSON-объект следующего формата:
{
data: {},
config: {},
resources: [],
worktime: {}
}
Чтобы задать желаемую единицу измерения длительности, вы можете отправить строку durationUnit (например, "minute", "hour", "day", "week", "month", "year") на сервер. Вот как это можно сделать:
<form action="https://export.dhtmlx.com/gantt" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="type" value="msproject-parse">
<input type="hidden" name="data"
value="{ \"durationUnit\": \"hour\" }" />
<button type="submit">Get</button>
</form>
Или с помощью JavaScript:
gantt.importFromMSProject({
data: file,
durationUnit: "hour",
callback: function(project){}
});
Если требуются определенные поля проекта, вы можете включить входные данные projectProperties с массивом необходимых полей в запросе на сервер. Это извлекает определенные свойства сущности проекта в свойство config ответа. Поддерживаемые свойства перечислены здесь.
Например:
<form action="https://export.dhtmlx.com/gantt" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="type" value="msproject-parse">
<input type="hidden" name="data"
value="{ \"projectProperties\": [\"Author\", \"Title\"] }" />
<button type="submit">Get</button>
</form>
Или с помощью JavaScript:
gantt.importFromMSProject({
data: file,
durationUnit: "hour",
projectProperties: ["Author", "Title"],
callback: function(project){
var config = project.config;
alert(config.$custom_properties.Author);
}
});
Чтобы получить поля, специфичные для задач, включите taskProperties в запрос на сервер с массивом желаемых полей. Это извлекает определенные свойства сущностей задач. Поддерживаемые свойства перечислены здесь.
Пример с HTML:
<form action="https://export.dhtmlx.com/gantt" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="type" value="msproject-parse">
<input type="hidden" name="data"
value="{ \"taskProperties\": [\"Contact\", \"Priority\"] }" />
<button type="submit">Get</button>
</form>
Или с помощью JavaScript:
gantt.importFromMSProject({
data: file,
durationUnit: "hour",
taskProperties: ["Contact", "Priority"],
callback: function(project){
var config = project.config;
alert(config.$custom_properties.Author);
gantt.parse(project.data);
}
});
gantt.attachEvent("onTaskLoading", function(task) {
if (task.$custom_data) {
task.contact = task.$custom_data["Contact"];
task.priority = task.$custom_data["priority"];
delete task.$custom_data;
}
return true;
});
Чтобы определить типы задач, задачи с типом Project будут иметь Summary: "1", а задачи с типом Milestone будут иметь Milestone: "1". Следующий пример демонстрирует импорт данных с этими свойствами и установку типов задач соответственно:
gantt.importFromMSProject({
data: file,
taskProperties: [
"Summary",
"Milestone",
],
callback: function (project) {
if (project) {
console.log(project)
gantt.clearAll();
if (project.config.duration_unit) {
gantt.config.duration_unit = project.config.duration_unit;
}
console.log('import: ', project.data);
gantt.parse(project.data);
}
}
});
Затем вы можете настроить типы задач на основе импортированных свойств:
gantt.attachEvent("onTaskLoading", function (task) {
if (task.$custom_data) {
if (task.$custom_data.Summary == "1") {
task.type = "project";
}
if (task.$custom_data.Milestone == "1") {
task.type = "milestone";
}
// delete task.$custom_data;
}
return true;
});
Related sample: Gantt. Import MSP files. Get task type from properties
Существует два API-эндпоинта для услуг экспорта/импорта MS Project:
Укажите эндпоинт, используя свойство server в конфигурации экспорта:
gantt.importFromMSProject({
server:"https://export.dhtmlx.com/gantt",
data: file,
callback: function(project){
// some logic
}
});
По умолчанию используется эндпоинт https://export.dhtmlx.com/gantt. Для больших файлов, превышающих 4МБ, используйте второй эндпоинт:
gantt.importFromMSProject({
server:"https://export.dhtmlx.com/gantt/project",
data: file,
callback: function(project){
// some logic
}
});
Этот эндпоинт поддерживает запросы до 40МБ и ограничен импортами/экспортами MS Project. Другие методы, такие как gantt.exportToPDF({server:"https://export.dhtmlx.com/gantt/project"}), приведут к ошибке сервера.
Расчеты времени в dhtmlxGantt и MS Project отличаются из-за их подходов. Эти различия могут привести к различным результатам. Вы можете настроить параметры gantt для более точного выравнивания результатов:
gantt.exportToMSProject({
project: {
HoursPerDay: function () {
return 24;
},
MinutesPerDay: function () {
return 24 * 60;
}
}
});
Related sample: Export to MSProject without the "work_time" settings
gantt.setWorkTime({day:0, hours:[0,24]});
gantt.setWorkTime({day:1, hours:[0,24]});
gantt.setWorkTime({day:2, hours:[0,24]});
gantt.setWorkTime({day:3, hours:[0,24]});
gantt.setWorkTime({day:4, hours:[0,24]});
gantt.setWorkTime({day:5, hours:[0,24]});
gantt.setWorkTime({day:6, hours:[0,24]});
gantt.config.duration_unit = "hour";
Related sample: Export to MSProject without the "work_time" settings
К началу