exports a Gantt chart into the PDF format
export | object | an object with export settings (see the details) |
gantt.exportToPDF();
//or
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
});
This method is defined in the export extension, so you need to include it on the page:
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
Read the details in the Export to PDF and PNG article.
The exportToPDF method takes as a parameter an object with a number of properties (all of the properties are optional):
name | (string) the name of the output file |
skin | ('terrace', 'skyblue', 'meadow', 'broadway') 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 |
additional_settings | (object) an object with additional settings. The object can contain the following attributes:
|
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,
}
});
}
Related sample: Export to the file of defined sizes
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);
Related sample: Export to the file of defined format