Export to PDF and PNG

dhtmlxGantt는 Gantt 차트를 PDF 또는 PNG 파일로 저장할 수 있는 온라인 내보내기 서비스를 제공합니다.

Gantt 차트를 PDF 또는 PNG로 로컬에서 내보내기 위해 직접 설정할 수 있는 다양한 내보내기 서비스가 있습니다. 내보내기 서비스는 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의 요청을 지원합니다.

PDF 내보내기 모듈 사용에 대한 자세한 내용은 여기를 참고하세요.

Gantt 차트를 PDF로 내보내려면 다음 단계를 따르세요:

• export_api 플러그인을 plugins 방식으로 활성화합니다:

gantt.plugins({
    export_api: true
});

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

• 그런 다음, exportToPDF 메서드를 호출하여 차트를 내보냅니다:

<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

Gantt 차트를 PNG 이미지로 내보내려면 다음 단계를 따르세요:

• export_api 플러그인을 plugins 방식으로 활성화합니다:

gantt.plugins({
    export_api: true
});

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

• 그런 다음, exportToPNG 메서드를 호출하여 차트를 내보냅니다:

<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

exportToPDF 및 exportToPNG 메서드는 다양한 선택적 속성을 가진 객체를 인자로 받을 수 있습니다:

옵션 속성을 사용하여 내보내기 메서드를 호출하는 예시

gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    locale:"en",
    start:"01-04-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true,
    callback: function(res){
        alert(res.url);
    }
});
 
gantt.exportToPNG({
    name:"mygantt.png",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    locale:"en",
    start:"01-04-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true,
    callback: function(res){
        alert(res.url);
    }
});

내보내는 파일의 이름을 지정하려면 exportToPDF/exportToPNG 파라미터에서 name 속성을 사용하세요:

gantt.exportToPDF({
    name:"my_beautiful_gantt.pdf"});

기본적으로 내보내는 Gantt 차트는 페이지에 표시된 언어와 동일한 언어를 사용합니다.

다른 언어로 내보내려면 exportToPDF/exportToPNG 파라미터에 locale 속성을 지정하세요:

gantt.exportToPDF({
    name:"mygantt.pdf",
    locale:"de" });

PDF 또는 PNG로 내보낼 작업을 지정하는 방법은 두 가지가 있습니다:

1. 내보낼 데이터의 날짜 범위를 지정합니다.
2. 내보낼 커스텀 데이터 소스를 제공합니다.

내보낼 작업의 날짜 범위 지정

내보내기에 포함할 작업의 범위를 지정하려면 exportToPDF/exportToPNG 파라미터에 start 와 end 속성을 사용하세요:

gantt.exportToPDF({
    name:"mygantt.pdf",
    start:"01-04-2013",    end:"11-04-2013"});

내보낼 커스텀 데이터 소스 지정

초기에 표시된 데이터와 다른 데이터 세트로 Gantt 차트를 내보내고 싶다면, exportToPDF/exportToPNG 메서드의 data 속성을 사용할 수 있습니다:

gantt.exportToPDF({
    data:{        data:[
            {id:1, text:"Project #1", start_date:"01-04-2013", duration:18},
            {id:2, text:"Task #1", start_date:"02-04-2013",duration:8, parent:1},
            {id:3, text:"Task #2", start_date:"11-04-2013",duration:8, parent:1}
        ],
        links:[
            {id:1, source:1, target:2, type:"1"},
            {id:2, source:2, target:3, type:"0"},
            {id:3, source:3, target:4, type:"0"},
            {id:4, source:2, target:5, type:"2"}
        ]
    }
});

기본적으로 내보내는 Gantt 차트는 페이지에 표시된 스킨과 동일한 스킨을 사용합니다.

내보낸 PNG 또는 PDF 파일에서 다른 스킨을 적용하려면 exportToPDF/exportToPNG 파라미터의 skin 속성을 사용하세요:

gantt.exportToPDF({
    name:"mygantt.pdf",
    skin:"material" });

사용 가능한 Gantt 스킨 전체 목록 보기.

header 및 footer 속성을 exportToPDF/exportToPNG 메서드의 파라미터에 사용하여 내보낸 PNG 또는 PDF 파일에 헤더나 푸터를 추가할 수 있습니다.

gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",    footer:"<h4>Bottom line</h4>"});

내보낸 Gantt 차트의 스타일을 커스터마이즈하려면, CSS 클래스를 담은 스타일시트를 다음 두 가지 방법으로 제공할 수 있습니다.

• 외부 스타일시트에 링크를 추가하는 방법:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });

• 또는 'style' 태그를 사용하여 스타일을 직접 삽입하는 방법:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... custom css classes here ...</style>' });

이 방법은 전역적으로 접근 가능한 HTTP 참조에서만 동작한다는 점에 유의하세요. CSS 파일이 인트라넷이나 로컬에 호스팅되어 있다면, 아래와 같이 스타일을 직접 삽입할 수 있습니다.

gantt.exportToPDF({
    header:"<style>.tier1{background: red; color:white;}</style>"
});

내보내기 함수에 사용할 모든 스타일 수집하기

때로는 스타일이 여러 파일에 분산되어 있고, 각각을 별도로 포함하기 번거로울 수 있습니다. 이 경우 페이지에서 사용되는 모든 스타일을 수집하여 내보내기 헤더에 포함할 수 있습니다.

모든 스타일은 document.styleSheets 객체에서 확인할 수 있습니다. 스타일이 동일 도메인에서 제공된다면, CSS 규칙을 수집하여 header에 삽입할 수 있습니다. 예시는 다음과 같습니다.

const styles = []
for (el in document.styleSheets) {
    try {
        const rules = (document.styleSheets[el]).cssRules;
        for (rule in rules) {
            styles.push(rules[rule].cssText)
        }
    }
    catch (e) { }
}
 
gantt.exportToPDF({
    raw: true,
    header: "<style>" + styles.join(" ") + "</style>"
});

Related sample:   Export Gantt with custom icons to PDF

Related sample:   Export Gantt with resource load diagram to PDF with no need to specify styles

기본적으로 Gantt 차트는 제공된 구성과 로드된 데이터에 따라 내보내기가 이루어지지만, custom elements 및 일부 템플릿은 포함되지 않습니다.

전체 Gantt 마크업을 있는 그대로(모든 커스텀 요소 포함) 내보내려면, exportToPDF/exportToPNG 메서드의 파라미터에 raw:true 속성을 설정하세요.

gantt.exportToPDF({
    raw:true
});

커스텀 요소가 제대로 표시되려면 custom styles가 필요합니다.

또한, 이 모드를 사용하면 API 요청의 크기가 커집니다. 대형 차트는 온라인 내보내기 서비스의 10MB 제한을 초과하여 내보내기에 실패할 수 있습니다. 이 경우 export service를 로컬에 설치하고 요청 크기를 조정해야 합니다.
로컬 내보내기 서비스 설정 방법은 system requirements를 참고하세요.

Gantt 차트를 PNG 또는 PDF로 내보낼 때, 보안상의 이유로 HTML 요소 내보내기에는 제한이 있습니다.

<canvas>, <svg>, <script>와 같이 특정 HTML 요소 및 src 속성에 Base64 데이터가 포함된 이미지 등은 제한됩니다. 하지만 SVG 및 Base64 형식의 이미지를 안전하게 내보내는 방법이 있습니다.

• src 속성에 SVG 이미지의 URL을 지정한 <img> 요소 사용 (PNG, JPG 내보내기에서 동작, Base64는 불가):

<img src=https://www.svgrepo.com/download/530597/hat.svg>

• background 또는 background-image CSS 스타일에 url 값을 사용하여 이미지 URL 또는 Base64 데이터를 지정 (PNG, JPG, SVG 내보내기에서 동작):

.red {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

Related sample:  Exporting safe and insecure HTML elements to PDF

export 모듈을 사용하고 있고, 온라인 export 서버에서 지원하지 않는 HTML 요소를 내보내야 하는 경우, 해당 제한을 해제하는 방법에 대해 지원팀에 문의할 수 있습니다. 다만, 이 경우 서버가 XSS 취약점에 노출될 수 있으니 주의가 필요합니다.