dhtmlxGantt provides an online export service that will allow you to export the Gantt chart into the PDF or PNG format.
The service is free, but the output PDF/PNG file will contain the library's watermark under the GPL license. In case you buy a license, the result of export will be available without a watermark during the valid support period (12 months for all PRO licenses).
The export service has 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.
If you need to export large charts, you can use a standalone export module. The export module is provided free of charge if you've obtained Gantt under Commercial, Enterprise or Ultimate license, or you can buy the module 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:
gantt.plugins({
export_api: true
});
<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:
gantt.plugins({
export_api: true
});
<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):
| name | (string) the name of the output file |
| skin | (string) the skin of the output Gantt chart |
| locale | (string) sets the language that will be used in the output Gantt chart |
| start | (string) sets the start date of the data range that will be presented in the output Gantt chart. The date format is defined by the date_format config |
| end | (string) sets the end date of the data range that will be presented in the output Gantt chart. The date format is defined by the date_format config |
| data | (object) sets a custom data source that will be presented in the output Gantt chart |
| header | (string) specifies the header that will be added to the output PDF image. Note, you can use any HTML here |
| footer | (string) specifies the footer that will be added to the output PDF image. Note, you can use any HTML here |
| server | (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/gantt |
| raw | (boolean) defines that all Gantt markup will be exported as it is, with all custom elements. false by default. Read the details below |
| callback | (function) If you want to receive an url to download a generated PDF/PNG file, the callback property can be used. It receives a JSON object with the url property |
| additional_settings | (object) an object with additional settings for the exportToPDF() method. The object can contain the following attributes:
|
| additional_settings | (object) an object with additional settings for the exportToPNG() method. The object can contain the following attributes:
|
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:
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"});
Note, the date format is defined by the date_format config.
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"}
]
}
});
Note, you cannot specify some URL as the value of the data parameter, just a data object.
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:
Note, you can use any HTML while specifying the parameters. While specifying images, remember that you need to set global paths as values of the "src" attribute
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:
gantt.exportToPDF({
name:"calendar.pdf",
header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });
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>"
});
For more examples, check the How to add resource chart or custom styles in the exported PDF file article.
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.