Export Gantt to PDF over multiple pages.

Gantt
#1

Hi There,

is it possible to have the gantt export over multiple pages / paginate, rather than one long PDF?

Many Thanks

Chris

#2

Hello,

Currently you only can export the Gantt Chart as single-page document.

#3

Does this feature exist yet? Outputting to a single page PDF has minimal value unless you are just displaying a month worth of phases/tasks.

Thanks,
Nick

#4

Hello Nick,
Gantt doesn’t have the feature to export PDF over multiple pages.
But as a workaround you can export the data for certain periods of time, then join pdf files into one file using other programs. To do that, specify the start and end parameters in the function:

gantt.exportToPDF({ start:"[date]", end:"[date]" })
In this article you may find additional information about exporting to PDF:
docs.dhtmlx.com/gantt/desktop__export.html
Here is an example how it might work:
http://snippet.dhtmlx.com/5/dad7e5604

Also, you can share with us your ideas how multipage export feature can be implemented.

#5

Hello Nick and Chris,

The dev team added a way to export the chart to several pages. To use that feature, you need to apply additional_settings. There, you need to use the width and height parameters or the format parameter.
Technically, Gantt is displayed on several pages, but in most cases, it won’t fit the specified width:
https://docs.dhtmlx.com/gantt/api__gantt_exporttopdf.html

When Gantt is exported, only its leftmost part is exported to the PDF document each time. Thus, to implement multi-page export, it is necessary to export Gantt several times, shifting Gantt to the left each time.

To shift Gantt in the exported file, you need to add the following style rule to #gantt_here in the header parameter:

var width = 1000;
var height = 1000;
var total_width = gantt.$task_bg.scrollWidth + gantt.$grid.scrollWidth;
 
for (var 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,
        }
    });
}

https://snippet.dhtmlx.com/5/d8462d9e6

In case you want to export Gantt to the specific format (‘A4’, for example), note, that the file format is defined in millimeters but the size in HTML is specified in pixels. Therefore, you need to convert the shift value from millimeters to pixels.

var widthMM = 297;
var width = widthMM / (25.4 inch / 144 PDF PPI);

https://snippet.dhtmlx.com/5/a4a4e62e3