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

exportToPDF

Description​

Экспортирует диаграмму Ганта в формат PDF

exportToPDF: (export?: any) => void

Parameters​

  • export - object - optional, объект с настройками экспорта (подробности см. далее)

Example​

gantt.exportToPDF();
 
//или
gantt.exportToPDF({
  name: "mygantt.pdf"
});

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

Details​

заметка

Этот метод определён в расширении export, поэтому необходимо активировать плагин export_api. Подробности читайте в статье .

заметка

note Если вы используете версию 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 принимает в качестве параметра объект с набором свойств (все свойства являются необязательными):

name(string) имя выходного файла
skin('terrace', 'skyblue', 'meadow', 'broadway') скин выходной диаграммы Ганта
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-файла, можно использовать свойство callback. Оно принимает JSON-объект с полем url
additional_settings(object) объект с дополнительными настройками. В объект могут входить следующие атрибуты:
  • 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, придётся сделать экспорт несколько раз, чтобы получить все данные диаграммы
  • fixed_headers - (boolean) включает отображение заголовков сетки и временной шкалы на каждой странице; false по умолчанию. Работает только с включённой настройкой merge_pages
  • margins - (object) объект с верхними, нижними, левыми и правыми полями выходного PDF-файла. Подробнее
  • header - (string) задаёт заголовок, который будет добавлен на каждую страницу выходного PDF-файла. Подробнее
  • footer - (string) задаёт нижний колонтитул на каждой странице выходного PDF-файла. Подробнее

Time restrictions​

заметка

Сервис экспорта имеет ограничения по времени.

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

Error: Timeout trigger 20 seconds

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

заметка

Если вам нужно экспортировать крупные диаграммы, вы можете использовать standalone export module. Экспорт-модуль предоставляется бесплатно, если вы получили Gantt по лицензии Commercial, Enterprise или Ultimate, или вы можете купить модуль отдельно.

Multi-page export​

Обратите внимание, что у экспортного модуля нет технической возможности выполнить следующее:

  • контролировать положение обрезки (задачи могут быть разрезаны посередине между страницами)
  • отображать шкалы на каждой странице без наложения задач
  • отображать заголовок и нижний колонтитул на каждой странице без наложения строк задач

Поэтому для выполнения вышеописанных задач необходимо применить кастомные решения. Ниже приведены некоторые из них.

Экспорт данных автоматически в одном файле​

Для мультистраничного экспорта в одном файле можно либо использовать онлайн-сервис экспорта (с учетом ограничений по времени) или stand-alone экспорт-модуль (без ограничений). Все, что нужно — это использовать атрибут merge_pages в объекте additional_settings:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true, 
        format: "A4"
    }
});

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

Связанный пример: Multi-page export in one file

Недостаток этого метода состоит в том, что экспорт данных требует значительно больше времени, чем экспорт всех данных на одной странице. Чтобы сократить время экспорта Gantt-данных, вы можете изменить уровень масштабирования (Zoom) и рендерить данные по неделям, месяцам или годам, тогда Gantt будет занимать меньше ширины и вам понадобится произвести экспорт меньше раз.

Посмотрите подробный обзор мультистраничного экспорта в одном PDF-файле в связной блог-посте: https://dhtmlx.com/blog/maintenance-release-pdf-export-module-gantt-0-6-4-scheduler-0-6-5-suite-8-3-10-kanban-1-5-12/#:~:text=Multipage%20Export%20in%20One%20PDF%20File.

Making several data exports manually​

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

Чтобы сместить Gantt в экспортированном файле, добавьте следующее правило стиля в #gantt_here в параметре header:

const width = 1000;
const height = 1000;
const total_width = gantt.$task_bg.scrollWidth + gantt.$grid.scrollWidth;

for (let i = 0; i < total_width; i += width) {
    gantt.exportToPDF({
        header:`<style>#gantt_here{left:-${i}px;position: absolute;}</style>`,
        //raw: true,
        additional_settings: {
            width: width,
            height: height,
        }
    });
}

Связанный пример: Export to the file of defined sizes

Если вам нужно экспортировать Gantt в конкретный формат (например, 'A3'), учтите, что формат файла определяется в миллиметрах, но размер в HTML задаётся в пикселях. Следовательно, нужно преобразовать значение смещения из миллиметров в пиксели.

const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);

Связанный пример: Export to the file of defined format

Примечание, если вы экспортируете мультистраничный Gantt, но получаете только один PDF-файл, это значит, что браузер блокирует всплывающие окна, потому что функция открывает их одновременно. В таком случае включите всплывающие окна и повторите экспорт.

blocked_popup

Displaying timeline and grid headers on every page in the exported file​

Вы можете включить отображение временной шкалы и заголовков сетки на каждой странице экспортируемого файла с помощью атрибута fixed_headers в объекте additional_settings. Обратите внимание, эта функция работает только при включённом атрибуте merge_pages as well:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true, 
        fixed_headers: true,  
        format: "A4"
    }
});

Связанный пример: Multi-page export with timeline and grid headers on each page

Связанный пример: Multi-page export with timeline and grid headers on each page for the Resource panel view

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

.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
    position: fixed;
    top:0;
    z-index:99999;
}
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