Перейти к основному содержимому

Экспорт в PDF и PNG

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

заметка

Сервис бесплатный, но итоговый PDF/PNG-файл будет содержать водяной знак библиотеки. Чтобы экспортировать без водяного знака, нужна действующая лицензия — результат экспорта будет доступен без водяного знака во время действительного срока поддержки (12 месяцев для всех PRO лицензий).

Существует несколько сервисов экспорта. Вы можете установить их на свой компьютер и экспортировать диаграмму Ганта в PDF или PNG локально. Обратите внимание, что сервисы экспорта не включены в пакет Gantt, прочитайте соответствующую статью, чтобы узнать условия использования каждого из них.

Ограничения онлайн-сервиса экспорта​

заметка

У онлайн-сервиса экспорта есть ограничения по времени и размеру запроса. См. Ограничения онлайн-сервиса экспорта.

Использование модулей экспорта​

Чтобы экспортировать большие диаграммы, экспортировать без ограничений онлайн-сервиса экспорта или хранить данные в своей сети, установите модуль экспорта на собственный сервер. Подробнее об использовании модуля экспорта для PDF, PNG, Excel и iCal.

Экспорт в PDF​

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

  • Чтобы использовать функциональность экспорта/импорта, включите плагин export_api через метод plugins:
gantt.plugins({
    export_api: true
});

Он позволяет использовать либо онлайн-сервис экспорта, либо локальный модуль экспорта.

заметка

Если версия Gantt ниже 8.0, нужно подключить на страницу https://export.dhtmlx.com/gantt/api.js, чтобы включить функциональность экспорта, например:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
  • Вызовите метод exportToPDF для экспорта диаграммы Gantt:
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'/>

<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Связанный пример: Export data from Gantt

Экспорт в PNG​

Чтобы экспортировать диаграмму Gantt в PNG-изображение, выполните следующие шаги:

  • Чтобы использовать онлайн-сервис экспорта, включите плагин export_api через метод plugins:
gantt.plugins({
    export_api: true
});
заметка

Если версия Gantt ниже 8.0, нужно подключить на страницу файл https://export.dhtmlx.com/gantt/api.js, чтобы включить онлайн-сервис экспорта, например:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
  • Вызовите метод exportToPNG для экспорта диаграммы Gantt:
<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'/>

<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Связанный пример: Export data from Gantt

Параметры методов экспорта​

Методы exportToPDF и exportToPNG принимают в качестве параметра один и тот же объект с набором свойств (все свойства являются необязательными):

name(string) имя выходного файла
skin(string) скин выходной диаграммы Gantt
locale(string) задаёт язык, который будет использоваться в выходной диаграмме Gantt
start(string) задаёт начальную дату диапазона данных, которые будут представлены в выходной диаграмме Gantt. Формат даты задаётся конфигурацией date_format
end(string) задаёт конечную дату диапазона данных, которые будут представлены в выходной диаграмме Gantt. Формат даты задаётся конфигурацией date_format
data(object) задаёт произвольный источник данных, который будет представлен в выходной диаграмме Gantt
header(string) задаёт заголовок, который будет добавлен к выходному изображению PDF. Обратите внимание, здесь можно использовать любой HTML
footer(string) задаёт нижний колонтитул, который будет добавлен к выходному изображению PDF. Обратите внимание, здесь можно использовать любой HTML
server(string) задаёт конечную точку API для запроса. Может использоваться с локальной установкой сервиса экспорта. Значение по умолчанию — https://export.dhtmlx.com/gantt
raw(boolean) определяет, что весь разметочный код Gantt будет экспортирован как есть, со всеми пользовательскими элементами. Значение по умолчанию — false. Подробнее ниже
callback(function) Если нужно получить URL для скачивания сгенерированного файла PDF/PNG, можно использовать свойство callback. Оно получает JSON-объект с полем url
additional_settings(object) объект с дополнительными настройками для метода exportToPDF(). Объект может содержать следующие атрибуты:
  • format - (string) формат выходного файла: "A0", "A1", "A2", "A3", "A4", "A5", "A6", "Legal", "Ledger", "Letter", "Tabloid"
  • landscape - (boolean) портретная или альбомная ориентация выходного файла. Атрибут работает только если указан атрибут "format".
  • width - (string | number | "content") ширина выходной страницы. Атрибут используется при экспорте нескольких страниц.
  • height - (string | number | "content") высота выходной страницы. Атрибут используется при экспорте нескольких страниц.
  • merge_pages - (boolean) включает многостраничный экспорт в одном файле; если установить false, придётся экспортировать данные несколько раз, чтобы получить все данные Gantt
  • fixed_headers - (boolean) включает отображение заголовков грида и временной шкалы на каждой странице; по умолчанию false. Работает только с включённой настройкой merge_pages
  • margins - (object) объект с верхними, нижними, левыми и правыми полями для выходного файла PDF. Подробнее ниже
  • header - (string) задаёт заголовок, который будет добавлен на каждой странице выходного файла PDF. Подробнее ниже
  • footer - (string) задаёт нижний колонтитул, который будет добавлен на каждой странице выходного файла PDF. Подробнее ниже
additional_settings(object) объект с дополнительными настройками для метода exportToPNG(). Объект может содержать следующие атрибуты:
  • width - (number|string) ширина выходной страницы
  • height - (number|string) высота выходной страницы
    • Атрибуты width и height будут проигнорированы, если указан slice_archive.
  • slice_archive - (boolean|object) позволяет сохранять большую диаграмму по частям и получать их в архиве. В виде объекта атрибут принимает параметры width и height. Если размер куска не определён (то есть slice_archive: true), используются значения по умолчанию 1000×1000.
  • slice_check - (boolean) добавляет HTML-страницу в архив. Эта страница позволяет проверить, что все части экспортированы корректно.
Calling export methods with optional properties
gantt.exportToPDF({
    name: "mygantt.pdf",
    header: "<h1>My company</h1>",
    footer: "<h4>Bottom line</h4>",
    locale: "en",
    start: "01-04-2026",
    end: "11-04-2026",
    skin: "terrace",
    data: {},
    server: "https://myapp.com/myexport/gantt",
    raw: true,
    callback: (res) => {
        alert(res.url);
    }
});

gantt.exportToPNG({
    name: "mygantt.png",
    header: "<h1>My company</h1>",
    footer: "<h4>Bottom line</h4>",
    locale: "en",
    start: "01-04-2026",
    end: "11-04-2026",
    skin: "terrace",
    data: {},
    server: "https://myapp.com/myexport/gantt",
    raw: true,
    callback: (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-2026",
    end: "11-04-2026"
});
заметка

Обратите внимание, формат даты определяется конфигурацией date_format.

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

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

gantt.exportToPDF({
    data: {
        tasks: [
            { id: 1, text: "Project #1", start_date: "01-04-2026", duration: 18 },
            { id: 2, text: "Task #1", start_date: "02-04-2026", duration: 8, parent: 1 },
            { id: 3, text: "Task #2", start_date: "11-04-2026", 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" }
        ]
    }
});
заметка

Обратите внимание, что в качестве значения параметра data нельзя указать URL, используется только объект данных.

Скин выходной диаграммы Gantt​

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

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

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

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

Заголовок/нижний колонтитул выходного файла​

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

заметка

Заметьте, вы можете использовать любой HTML при указании параметров. При использовании изображений помните, что нужно задавать глобальные пути в качестве значения атрибута "src".

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

Заголовок/нижний колонтитул для каждой страницы выходного PDF​

Чтобы добавить заголовок/нижний колонтитул для каждой страницы выходного PDF, используйте свойства header/footer в объекте additional_settings метода exportToPDF.

Вы можете задать номер текущей страницы с помощью элемента с class="pageNumber" и общее количество страниц с помощью элемента с class="totalPages" в свойствах header/footer:

gantt.exportToPDF({
    additional_settings: {
        format: "A4",
        // правильные поля необходимы для корректного рендирования заголовков/нижних колонтитулов
        margins: {
            top: 10,
            bottom: 10,
            left: 0.1,
            right: 1
        },
        header: "Each page header",
        footer: 'Page: <span className="pageNumber"></span>/<span className="totalPages"></span>'
    }
});

Обратите внимание, что эти настройки работают только при указанных полях (margins) и если есть достаточно места для корректного отображения заголовков/нижних колонтитулов. В противном случае заголовки/нижние колонтитулы будут выведены за пределы графика. Рекомендуется установить минимальные поля в 10 мм для простой текстовой строки.

Отступы выходного PDF файла​

Чтобы добавить отступы к выходному PDF файлу, используйте свойство margins в объекте additional_settings метода exportToPDF. Свойство margins работает как для одностраничного, так и для multipage export.

Значения настроек полей задаются числами:

gantt.exportToPDF({
    additional_settings: {
        margins: {
            top: 5,
            bottom: 10,
            left: 2,
            right: 2
        },
    },
});

Если какое-либо из настроек полей не указано, оно будет проигнорировано.

Значения по умолчанию задаются в миллиметрах, но можно указать и дюймы, добавив свойство unit: "inch":

gantt.exportToPDF({
    additional_settings: {
        margins: {
            top: 5,
            bottom: 10,
            left: 2,
            right: 2,
            unit: "inch"
        },
    },
});

Пользовательский стиль выходного файла​

Чтобы применить собственный стиль к диаграмме, подключите таблицу стилей с вашими кастомными CSS-классами:

  • через ссылку (link):
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>"
});
заметка

Для большего числа примеров смотрите статью Решения по добавлению ресурcного графика или пользовательских стилей в экспортированный PDF-файл.

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

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

Все стили хранятся в объекте document.styleSheets на HTML-странице. Если используется элемент <style> или <link/>, подключённый с того же сайта, можно собрать все стили и затем указать их в заголовке. Ниже приведён пример:

const styles = [];

for (const styleSheet of document.styleSheets) {
    try {
        const rules = styleSheet.cssRules;

        for (const rule of rules) {
            styles.push(rule.cssText);
        }
    } catch (error) {
        // Игнорировать таблицы стилей, которые невозможно прочитать
    }
}

gantt.exportToPDF({
    raw: true,
    header: "<style>" + styles.join(" ") + "</style>"
});

Связанный пример: Export Gantt with custom icons to PDF

Связанный пример: 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 МБ и экспортаmay not be possible таким образом. В таком случае вам потребуется локально иметь сервис экспорта и увеличить размер запроса.

Проверьте системные требования для локальной установки сервисов экспорта.

Экспорт HTML-элементов​

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

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

  • можно использовать элемент <img/> с атрибутом src, содержащим URL изображения в формате SVG (подходит для PNG и JPG форматов, не работает с Base64), например:
<img src="https://www.svgrepo.com/download/530597/hat.svg">
  • можно использовать элементы style, такие как 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;
}

Связанный пример: Exporting safe and insecure HTML elements to PDF

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

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support