dhtmlxGantt 라이브러리는 Gantt 차트의 데이터를 MS Project로 내보내기(Export) 및 MS Project로부터 Gantt 차트로 가져오기(Import)를 지원합니다.
내보내기 서비스는 무료로 사용할 수 있지만, 결과 파일에는 GPL 라이선스 하에 라이브러리 워터마크가 포함됩니다.
라이선스를 구매하신 경우, 지원 기간(모든 PRO 라이선스의 경우 12개월) 동안 내보내기 결과에 워터마크가 표시되지 않습니다.
여러 종류의 내보내기 서비스가 제공되며, 이들 서비스는 로컬 컴퓨터에 별도로 설치하여 Gantt 차트를 MS Project로 내보낼 수 있습니다.
이 내보내기 서비스들은 Gantt 패키지에 기본 포함되어 있지 않으니 참고하시기 바랍니다.
각 서비스의 사용 조건에 대한 자세한 내용은 관련 문서를 참고하세요.
내보내기 서비스는 처리 시간과 요청 크기에 제한이 있습니다.
내보내기 처리가 20초를 초과할 경우, 작업이 중단되며 아래와 같은 오류가 표시됩니다:
Error: Timeout trigger 20 seconds
여러 사용자가 동시에 Gantt 차트를 내보내는 경우 전체적으로 처리 시간이 길어질 수 있지만, 각 사용자의 내보내기 요청 별로 시간이 개별적으로 계산됩니다.
공통 API 엔드포인트 https://export.dhtmlx.com/gantt는 모든 내보내기 유형(exportToPDF, exportToPNG, exportToMSProject 등)을 처리하며, 최대 요청 크기는 10 MB입니다.
또한, MSProject 및
Primavera P6 내보내기/가져오기 서비스(exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6)를 위한 전용 API 엔드포인트 https://export.dhtmlx.com/gantt/project가 있습니다. 이 엔드포인트는 최대 40 MB까지 요청 가능합니다.
대용량 차트 내보내기가 필요한 경우, 독립형 내보내기 모듈 사용을 고려하세요.
이 모듈은 Commercial, Enterprise, Ultimate 라이선스 보유 시 무료로 제공되며, 아니면 여기에서 별도 구매할 수 있습니다.
MS Project 내보내기 모듈 사용법 자세히 알아보기
Gantt 컴포넌트는 링크, 작업, 리소스를 MS Project로 내보낼 수 있습니다.
Gantt 차트의 데이터를 MS Project로 내보내려면 다음 단계를 따르세요:
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();
이 메서드는 원격 서비스로 요청을 전송하며, 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;
}
}
});
이 속성들은 Project entity의 속성과 대응합니다.
지원 속성 목록은 여기에서 확인하세요. 값은 고정값 또는 내보내기 시 실행되는 함수일 수 있습니다.
gantt.exportToMSProject({
tasks: {
'StartVariance': function (task) {
if (task.startVariance)
return task.startVariance;
else
return 0;
},
'PercentWorkComplete': function (task) {
return (task.progress + 0.1);
},
'Custom': function (task) {
return 'Custom value';
},
'Custom 2': 'My Custom value'
}
});
이 속성들은 Task entity의 속성과 대응하며, 지원 속성 목록은 여기에서 확인할 수 있습니다.
값은 고정값 또는 각 작업별로 호출되는 함수일 수 있습니다.
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" 중 하나일 수 있습니다.
리소스 할당은 tasks 설정의 ResourceAssignments 속성을 사용하여 지정합니다:
var users = [// resources
{key:'0', label: "N/A"},
{key:'1', label: "John"},
{key:'2', label: "Mike"},
{key:'3', label: "Anna"}
];
gantt.exportToMSProject({
resources: users
.filter(function(u){
if(u.key === '0')//기본 옵션은 제외
return false;
return true;
})
.map(function(u){
return {
id: u.key,
name: u.label,
type: "work"
};
}),
tasks: {
ResourceAssignments: function(task){ return task.user; } }
});
ResourceAssignments 속성은 작업 객체를 받아 문자열/숫자 또는 문자열/숫자 배열을 반환하는 함수입니다:
tasks: {
ResourceAssignments: function(task){
return [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);
}
}
});
여기서 file은 XML 또는 MPP Project 파일을 담은 File 인스턴스여야 합니다.
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>
또는
gantt.importFromMSProject({
data: file,
durationUnit: "hour",
callback: function(project){}
});
프로젝트 필드를 추출하려면 projectProperties 입력값에 서버로 전송할 원하는 필드의 배열을 포함할 수 있습니다. 이를 통해 Project entity의 임의 속성을 응답의 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>
또는
gantt.importFromMSProject({
data: file,
durationUnit: "hour",
projectProperties: ["Author", "Title"],
callback: function(project){
var config = project.config;
alert(config.$custom_properties.Author);
}
});
작업 필드를 가져오려면 taskProperties 입력값에 서버로 전송할 원하는 필드의 배열을 포함할 수 있습니다. 이를 통해 Task entities의 임의 속성을 추출할 수 있습니다. 지원되는 속성은 문서에서 확인할 수 있습니다.
<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>
또는
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
MSProject 내보내기/가져오기 서비스에는 두 가지 API 엔드포인트가 있습니다:
엔드포인트는 내보내기 구성 객체의 server 속성으로 지정할 수 있습니다:
gantt.importFromMSProject({
server:"https://export.dhtmlx.com/gantt",
data: file,
callback: function(project){
// some logic
}
});
엔드포인트를 지정하지 않으면 https://export.dhtmlx.com/gantt가 기본값으로 사용됩니다. 다음 호출은 위와 동일합니다:
gantt.importFromMSProject({
data: file,
callback: function(project){
// some logic
}
});
4MB를 초과하는 대용량 프로젝트를 내보내거나 가져오려면 두 번째 엔드포인트를 사용하세요:
gantt.importFromMSProject({
server:"https://export.dhtmlx.com/gantt/project",
data: file,
callback: function(project){
// some logic
}
});
이 엔드포인트는 최대 40MB까지 지원하며 MS Project 내보내기/가져오기를 위해 설계되었습니다. MS Project 내보내기에만 사용할 수 있습니다.
다른 메서드, 예를 들어 gantt.exportToPDF({server:"https://export.dhtmlx.com/gantt/project"})와 같이 사용하면 서버 오류가 발생합니다.
dhtmlxGantt와 MS Project는 날짜 계산 방식에 차이가 있어 결과가 다를 수 있습니다.
이 차이는 사용 중인 gantt 설정 조합에 따라 달라집니다. gantt의 일부 설정은 계산 결과에 영향을 줍니다:
1. dhtmlxGantt와 MS Project 간 기간 변환 방식이 다릅니다.
이 문제는 MS Project로 내보낼 때 HoursPerDay와 MinutesPerDay를 지정하여 해결할 수 있습니다:
gantt.exportToMSProject({
project: {
HoursPerDay: function () {
return 24;
},
MinutesPerDay: function () {
return 24 * 60;
}
}
});
Related sample: Export to MSProject without the "work_time" settings
2. 프로젝트에서 work_time 설정이 비활성화되어 있을 수 있습니다:
gantt.config.work_time = false;
작업 시간 계산이 꺼져 있어도, gantt는 기본 캘린더 설정(하루 8시간, 월~금 근무)을 계속 포함합니다. 내보내기 클라이언트는 항상 이 기본 캘린더를 MS Project로 전송하므로, MS Project에서 작업 기간을 다르게 계산하게 됩니다.
해결 방법은 기본 캘린더를 지워 gantt와 MS Project에서 작업 기간이 동일하게 계산되도록 하는 것입니다:
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]});
3. gantt.config.duration_unit이 "day"로 설정된 경우 요약 항목 날짜에 차이가 있을 수 있습니다:
gantt.config.duration_unit = "day";
이 설정에서는 gantt가 기간을 정수 일수로 반올림하지만, MS Project는 소수점 이하 기간을 표시합니다. 예를 들어, 프로젝트 기간이 gantt에서는 439일, MS Project에서는 438.58일로 표시될 수 있습니다.
해결 방법은 duration_unit을 시간 단위로 변경하는 것입니다:
gantt.config.duration_unit = "hour";
Related sample: Export to MSProject without the "work_time" settings
Back to top