Экспорт в PDF и PNG

dhtmlxGantt включает онлайн-сервис экспорта, позволяющий сохранить вашу диаграмму Ганта в виде файла PDF или PNG.

Существуют также сервисы экспорта, которые можно установить локально на вашем компьютере. Это позволяет экспортировать диаграммы Ганта в PDF или PNG без использования онлайн-сервиса. Имейте в виду, что эти сервисы экспорта не включены в пакет Gantt. Для получения более подробной информации о том, как их использовать, ознакомьтесь с соответствующей статьей.

Ограничения по времени

Если процесс экспорта занимает более 20 секунд, он будет остановлен, и вы увидите ошибку, подобную этой:

Error: Timeout trigger 20 seconds

Когда несколько пользователей экспортируют диаграммы Ганта одновременно, процесс может замедлиться. Однако время, затраченное на запрос каждого пользователя, учитывается индивидуально.

Ограничения на размер запроса

Основная конечная точка API для всех методов экспорта (exportToPDF, exportToPNG, exportToMSProject и т.д.) — https://export.dhtmlx.com/gantt. Максимальный размер запроса составляет 10 МБ.

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

Для получения более подробной информации о использовании модуля экспорта для PDF, ознакомьтесь с этим руководством.

Чтобы сохранить вашу диаграмму Ганта в виде PDF-документа, выполните следующие шаги:

• Включите плагин export_api с помощью метода плагины:

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

Чтобы сохранить вашу диаграмму Ганта в виде изображения PNG, выполните следующие шаги:

• Включите плагин export_api с помощью метода плагины:

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

По умолчанию экспортируемая диаграмма Ганта использует тот же язык, что и на странице. Чтобы установить другой язык, используйте свойство 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"});

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

Если вам нужно экспортировать диаграмму Ганта, используя набор данных, отличный от первоначально отображаемого в диаграмме, вы можете использовать свойство 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"}
        ]
    }
});

По умолчанию экспортируемая диаграмма Ганта использует тот же скин, что и на странице. Если вы хотите применить другой скин к вашему 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>"});

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

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

Консолидация стилей для экспорта

Если ваши стили разбросаны по нескольким файлам и недоступны публично, вы можете собрать их все для экспорта. Объект document.styleSheets на HTML-странице содержит все стили. Для стилей или ссылок с того же сайта вы можете собрать их и включить в 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:   Экспорт Ганта с пользовательскими иконками в PDF

Related sample:   Экспорт Ганта с диаграммой нагрузки ресурсов в PDF без необходимости указывать стили

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

gantt.exportToPDF({
    raw:true
});

Имейте в виду, что пользовательские элементы потребуют пользовательских стилей для корректного отображения. Использование этого режима может увеличить размер запроса API. Большие графики могут превысить онлайн-лимит экспорта в 10 МБ, требуя локально установленного сервиса экспорта с увеличенным размером запроса. Ознакомьтесь с системными требованиями для локальной установки.

При экспорте диаграммы Ганта в PNG или PDF существуют некоторые ограничения по 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>

• Используйте атрибуты стиля, такие как 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;
}

Related sample:  Экспорт безопасных и небезопасных HTML элементов в PDF

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