Экспорт в PNG

Начиная с версии 4.1, dhtmlxScheduler предоставляет онлайн-сервис экспорта, который позволяет экспортировать Scheduler как изображение PNG.

Существует несколько сервисов экспорта, которые вы можете использовать. Вы можете установить их локально на свой компьютер, чтобы экспортировать Scheduler в PNG без использования онлайн-сервиса.

Имейте в виду, что сервисы экспорта не входят в пакет Scheduler. Для получения подробной информации об условиях использования каждого сервиса ознакомьтесь с соответствующей статьёй.

Все методы экспорта (exportToPDF, exportToPNG и др.) используют общий API-эндпоинт https://export.dhtmlx.com/scheduler. Максимально допустимый размер запроса — 10 МБ.

Чтобы экспортировать Scheduler как изображение 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"
});

Вы можете задать своё имя для экспортируемого PNG, используя свойство name в методе exportToPNG:

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

Чтобы добавить заголовок или подвал в выходной PNG, используйте свойства header и footer в методе exportToPNG:

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

Чтобы применить пользовательские стили к экспортируемому Scheduler, добавьте ваш 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 размещён локально или во внутренней сети, вы можете вставить все стили как inline:

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

При экспорте Scheduler в PNG учитывайте, что экспорт некоторых HTML-элементов ограничен по соображениям безопасности.

Такие элементы, как <canvas>, <svg>, <script>, а также изображения с Base64 в атрибуте src поддерживаются не полностью. Тем не менее, есть безопасные способы включения изображений в SVG и Base64 форматах:

• Используйте тег <img> с атрибутом src, указывающим на URL SVG-изображения (работает для экспорта в PNG и JPG, но не для Base64), например:

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

• Используйте CSS-свойства background или background-image с 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;
}

Если у вас есть собственный модуль экспорта и требуется экспортировать HTML-элементы, которые не поддерживаются онлайн-сервером экспорта, вы можете обратиться в службу поддержки для получения рекомендаций по доработке вашего модуля с целью снятия этих ограничений. Имейте в виду, что это может привести к уязвимости вашего сервера для XSS-атак.