Экспорт в PDF и 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 МБ.

Также существует отдельный API-эндпоинт https://export.dhtmlx.com/gantt/project для сервисов экспорта/импорта MSProject и Primavera P6 (exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6). Этот эндпоинт поддерживает запросы до 40 МБ.

Подробнее об использовании модуля экспорта в 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);
    }
});

Чтобы задать пользовательское имя для экспортируемого файла, используйте свойство name в параметрах методов exportToPDF/exportToPNG:

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

По умолчанию экспортируемая диаграмма Gantt использует тот же язык, что и на странице.

Чтобы экспортировать на другом языке, укажите свойство locale в параметрах методов exportToPDF/exportToPNG:

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

Есть два способа указать, какие задачи попадут в экспортируемый PDF или PNG:

1. Задать диапазон дат для экспортируемых данных.
2. Указать собственный источник данных для экспорта.

Задание диапазона дат для экспорта задач

Чтобы задать диапазон задач для экспорта, используйте свойства start и end в параметрах методов exportToPDF/exportToPNG:

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

Задание пользовательского источника данных для экспорта

Если вы хотите экспортировать диаграмму Gantt с другим набором данных, отличным от отображаемого на странице, используйте свойство data в параметрах методов exportToPDF/exportToPNG:

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-файлу, используйте свойство skin в параметрах методов exportToPDF/exportToPNG:

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

Смотрите полный список доступных скинов Gantt.

Вы можете добавить заголовок или подвал в экспортируемый PNG или PDF файл, используя свойства header и footer в параметрах методов exportToPDF/exportToPNG:

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>"
});

Сбор всех стилей для функции экспорта

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

Все стили доступны в объекте 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 экспортируется на основе заданной конфигурации и загруженных данных, однако пользовательские элементы и некоторые шаблоны не включаются.

Чтобы экспортировать всю разметку Gantt так, как она отображается, включая все пользовательские элементы, установите свойство raw:true в параметрах методов exportToPDF/exportToPNG.

gantt.exportToPDF({
    raw:true
});

Имейте в виду, что пользовательским элементам могут понадобиться пользовательские стили для корректного отображения.

Также при использовании этого режима увеличивается размер API-запроса. Крупные диаграммы могут превысить лимит в 10 МБ онлайн-сервиса экспорта и не экспортироваться. В таких случаях потребуется установить экспортный сервис локально и скорректировать допустимый размер запроса.
См. системные требования для локальной настройки сервисов экспорта.

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

Некоторые 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;
}

Related sample:  Exporting safe and insecure HTML elements to PDF

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