Export to PNG

버전 4.1부터 dhtmlxScheduler는 스케줄러를 PNG 이미지로 내보낼 수 있는 온라인 내보내기 서비스를 제공합니다.

여러 가지 내보내기 서비스를 사용할 수 있습니다. 온라인 서비스에 의존하지 않고 PNG로 Scheduler를 내보내기 위해 로컬에 설치할 수도 있습니다.

내보내기 서비스는 Scheduler 패키지에 포함되어 있지 않습니다. 각 서비스의 사용 조건에 대한 자세한 내용은 관련 문서를 참고하세요.

모든 내보내기 메서드(exportToPDF, exportToPNG 등)는 공통 API 엔드포인트 https://export.dhtmlx.com/scheduler를 사용합니다. 허용되는 최대 요청 크기는 10 MB입니다.

스케줄러를 PNG 이미지로 내보내려면 다음 단계를 따라주세요:

• export_api 플러그인을 plugins 메서드를 사용하여 활성화합니다:

scheduler.plugins({
    export_api: true
});

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

• exportToPNG 메서드를 사용하여 내보내기를 실행합니다:

<input value="Export to PNG" type="button" onclick='scheduler.exportToPNG()'>

Related sample:  Export to PDF/PNG

exportToPNG() 메서드는 여러 가지 선택적 속성을 가진 객체를 인자로 받을 수 있습니다:

선택적 속성을 포함하여 내보내기 메서드를 호출하는 예시

scheduler.exportToPNG({
    format:"A4",
    orientation:"portrait",
    zoom:1,
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    server:"https://myapp.com/myexport/scheduler"
});

exportToPNG 메서드의 name 속성을 사용하여 내보내는 PNG의 파일명을 지정할 수 있습니다:

scheduler.exportToPNG({
    name:"my_beautiful_scheduler.png"});

exportToPNG 메서드의 header 및 footer 속성을 사용하여 출력 PNG에 헤더나 푸터를 포함할 수 있습니다:

scheduler.exportToPNG({
    name:"myscheduler.png",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>"
});

내보내는 스케줄러에 커스텀 스타일을 적용하려면 다음 방법 중 하나로 CSS를 추가하세요:

• 스타일시트 링크 포함:

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

• 또는 'style' 태그로 스타일을 직접 삽입:

scheduler.exportToPNG({
    name:"calendar.png",
    header:'<style>... custom css classes here ...</style>' });

CSS가 로컬이나 인트라넷에 있다면 모든 스타일을 인라인으로 삽입할 수 있습니다:

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

Scheduler를 PNG로 내보낼 때, 보안상의 이유로 일부 HTML 요소의 내보내기는 제한됩니다.

<canvas>, <svg>, <script>와 Base64 src 속성을 가진 이미지와 같은 요소는 완전히 지원되지 않습니다. 하지만 SVG 및 Base64 형식의 이미지를 포함하는 안전한 방법이 있습니다:

• src 속성에 SVG 이미지 URL을 지정한 <img> 태그 사용 (PNG 및 JPG 내보내기에서는 동작하지만 Base64 내보내기에서는 동작하지 않습니다):

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

• CSS의 background 또는 background-image에 이미지 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;
}

자체 내보내기 모듈을 사용하고 있고 온라인 내보내기 서버에서 지원하지 않는 HTML 요소를 내보내야 한다면, 지원팀에 문의하여 해당 제한을 제거하는 방법에 대해 안내를 받을 수 있습니다. 단, 이렇게 하면 서버가 XSS 취약성에 노출될 수 있다는 점을 염두에 두세요.