exportToPDF

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

void exportToPDF( [object export] );
exportobjectнеобязательный, объект с настройками экспорта (см. детали)

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-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true,
    callback: function(res){
        alert(res.url);
    }
});

Details

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

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

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

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

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

Error: Timeout trigger 20 seconds

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

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

Экспорт на несколько страниц

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

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

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

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

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

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

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

Related sample:  Экспорт на несколько страниц в один файл

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

Подробный обзор экспорта на несколько страниц в один PDF файл можно найти в связанной статье блога.

Выполнение нескольких экспортов данных вручную

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

Related sample:  Экспорт в файл определенных размеров

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

const widthMM = 297;
const width = widthMM / (25.4 дюйма / 96 PDF PPI);

Related sample:  Экспорт в файл определенного формата


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

blocked_popup

Отображение заголовков timeline и grid на каждой странице в экспортируемом файле

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

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

Related sample:  Экспорт на несколько страниц с заголовками timeline и grid на каждой странице

Related sample:  Экспорт на несколько страниц с заголовками timeline и grid на каждой странице для представления панели ресурсов

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

.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
  position: fixed;
  top:0;
  z-index:99999;
}
See also
К началу