Printing huge gantt with customization and pagination

Gantt
#1

Hello,

Let’s say i would like to print a very big gantt (in height, not width) with many activities and links.
I would have to deal with multiple pages.
And on each page, i need to have a header (title), a footer (legend).
What’s the right way to achieve this ?

Can i do it with only 1 gantt object using the lib ? Do i have to create a gantt object for each page ?

And let’s say i want to have an additionnal timeline at the bottom if the user prints in A3 format.
Is there a better way than creating a second gantt with no activity on each page ?

#2

Hello,
Right now, there is no built-in feature to display the header and footer on each page. It will be added in the future update of the export module, but I cannot give you any ETA on when it is going to be available for the online export server. But if you are using the standalone export module or have the license for it, you can try the unreleased version that has this functionality. To do that, you can submit a support request via email, specify the license number and mention this topic.

Otherwise, you need to implement a custom solution by using the Gantt API and Javascript. It is possible to add custom HTML elements to the header and footer` parameters of the export function:
https://docs.dhtmlx.com/gantt/desktop__export.html#parametersoftheexportmethods:~:text=in%20the%20output%20Gantt%20chart-,header,the%20output%20PDF%20image.%20Note%2C%20you%20can%20use%20any%20HTML%20here,-server

So, you can add the elements and include the position: fixed style rules, then the elements will be displayed on each page.
Here is a similar example:
https://snippet.dhtmlx.com/x2vigqyk

But Gantt is printed on the all sizes of the page, and right now, there is no way to change it. So, you can try adding empty task rows that will provide an empty space for the footer and header. You just need to find a proper formula to always have the exact height for the task rows for each page. This approach is described in the following article:

Here is the snippet that can help you to start implementing your solution:
https://snippet.dhtmlx.com/w905ht5t?mode=wide