Export to PDF and PNG

dhtmlxGantt provides an online export service that will allow you to export the Gantt chart into the PDF or PNG format.

Time restrictions

If the process takes over than 20 seconds, the export will be canceled and the following error will occur:

Error: Timeout trigger 20 seconds

If several people export Gantt at the same time, the process can take more time than usual. But that's fine because the time which is spent for export request from a specific user is counted separately.

There are several export services available. You can install them on your computer and export Gantt chart to PDF or PNG locally.

Note that export services are not included into the Gantt package, read the corresponding article to learn the terms of using each of them.

There is a common API endpoint https://export.dhtmlx.com/gantt which serves for all export methods (exportToPDF, exportToPNG, exportToMSProject, etc.). Max request size is 10 MB.

There is also a separate API endpoint https://export.dhtmlx.com/gantt/project specific for the MSProject export/import services (exportToMSProject/importFromMSProject only). Max request size: 40 MB.

To export Gantt chart as a PDF document, do the following steps:

• To use the online export service, enable the export_api plugin via the plugins method:

gantt.plugins({
    export_api: true
});

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

• Call the exportToPDF method to export the Gantt chart:

<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

To export Gantt chart as a PNG image, do the following steps:

• To use the online export service, enable the export_api plugin via the plugins method:

gantt.plugins({
    export_api: true
});

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

• Call the exportToPNG method to export the Gantt chart:

<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

The exportToPDF and exportToPNG methods take as a parameter the same object with a number of properties (all of the properties are optional):

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

To set a custom name for the output file, use the name property in the parameter of the exportToPDF/exportToPNG methods:

gantt.exportToPDF({
    name:"my_beautiful_gantt.pdf"});

By default, the Gantt chart will be exported in the same language as it is shown on the page.

To set a custom language for the output file, use the locale property in the parameter of the exportToPDF/exportToPNG methods:

gantt.exportToPDF({
    name:"mygantt.pdf",
    locale:"de" });

To set the tasks that should be presented in the output PDF or PNG file, use one of the following ways:

1. Specify the date range of the output data.
2. Specify a custom data source for output.

Specifying the date range of the output tasks

To set the range of tasks that will be presented in the output document, use the start, end properties in the parameter of the exportToPDF/exportToPNG methods:

gantt.exportToPDF({
    name:"mygantt.pdf",
    start:"01-04-2013",    end:"11-04-2013"});

Setting a custom data source to export

To export the Gantt chart with a custom data set (i.e. not with the data presented in the initial Gantt chart), use the data property in the parameter of the exportToPDF/exportToPNG methods:

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

By default, the Gantt chart will be exported with the same skin as it is shown on the page.

To set a different skin for the output PNG or PDF file, use the skin property in the parameter of the exportToPDF/exportToPNG methods:

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

Check the full list of available Gantt skins.

To add a header/footer to the output PNG or PDF file, use the header/footer properties in the parameter of the exportToPDF/exportToPNG methods:

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

To apply a custom style for the gantt, provide the stylesheet with your custom CSS classes:

• through a link:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });

• or through the 'style' tag:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... custom css classes here ...</style>' });

Note, the aforementioned solution works for the global HTTP reference. If you have CSS classes specified in an Intranet/local environment, you can embed all styles as in:

gantt.exportToPDF({
    header:"<style>.tier1{background: red; color:white;}</style>"
});

Collecting all styles for the export function

Sometimes styles are specified in different files unavailable for public access, and it is unhandy to include styles from each of them separately. There is a way to collect all styles together for export.

All styles are stored in the document.styleSheets object on an HTML page. If the style or link element included from the same site is used, you can collect all of them and then specify in the header. Check the example below:

const styles = []
for (el in document.styleSheets) {
    try {
        const rules = (document.styleSheets[el]).cssRules;
        for (rule in rules) {
            styles.push(rules[rule].cssText)
        }
    }
    catch (e) { }
}
 
gantt.exportToPDF({
    raw: true,
    header: "<style>" + styles.join(" ") + "</style>"
});

Related sample:   Export Gantt with custom icons to PDF

Related sample:   Export Gantt with resource load diagram to PDF with no need to specify styles

By default the Gantt chart is exported based on the specified configuration and loaded data, while custom elements and some templates are not exported. To export the whole gantt markup as it is, with all custom elements, you can set the raw:true property in the parameter of the exportToPDF/exportToPNG methods.

gantt.exportToPDF({
    raw:true
});

Note that custom elements will require providing custom styles in order to be displayed correctly.

Pay attention that the use of this mode increases the size of the API request. Large charts can exceed limit of the online export of 10MB and may not be exported that way. In such a case you need to have an export service installed locally and increase the request size.
Check system requirements to install export services locally.

While exporting the Gantt chart to the PNG and PDF formats, you should note that export of HTML elements is limited due to their possible insecurity.

There are HTML elements which are not entirely allowed for export, such as <canvas>, <svg>, <script> and images with the src attribute that contains a Base64 image. However, there are safe ways of exporting images in the SVG and Base64 formats:

• you can use an <img> element with the src attribute that contains a URL of the image in the SVG format (suitable for the PNG and JPG formats, doesn't work for the Base64 format), e.g.:

<img src=https://www.svgrepo.com/download/530597/hat.svg>

• you can use style elements, such as background or background-image and specify the url attribute with the link to the image or an image in the Base64 format as its value (suitable for the PNG/JPG/SVG formats)

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

Related sample:  Exporting safe and insecure HTML elements to PDF

If you have an export module and you need to export HTML elements that are not supported by our online export server, you can submit a support request to get instructions on the changes you need to make in your module to remove restrictions. However, you should take into account that your server will be vulnerable to XSS-attacks.