exportToPDF
Description
Exportiert ein Gantt-Diagramm ins PDF-Format
exportToPDF: (export?: any) => void
Parameters
export- Objekt - optional, ein Objekt mit Export-Einstellungen (siehe Details)
Example
gantt.exportToPDF();
//oder
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-2026",
end: "11-04-2026",
skin: "terrace",
data: { },
server: "https://myapp.com/myexport/gantt",
raw: true,
callback: (res) => {
alert(res.url);
}
});
Details
Dieses Verfahren ist im export-Erweiterung definiert, daher müssen Sie das export_api Plugin aktivieren. Lesen Sie die Details im Artikel.
Wenn Sie die Gantt-Version älter als 8.0 verwenden, müssen Sie auf Ihrer Seite das https://export.dhtmlx.com/gantt/api.js-Skript einbinden, um den Online-Exportdienst zu aktivieren, z. B.:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
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 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 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 |
| callback | (function) If you want to receive an url to download a generated PDF file, the callback property can be used. It receives a JSON object with the url property |
| additional_settings | (object) an object with additional settings. The object can contain the following attributes:
|
Time restrictions
Der Exportdienst unterliegt Zeitbeschränkungen.
Wenn der Prozess länger als 20 Sekunden dauert, wird der Export abgebrochen und der folgende Fehler tritt auf:
Error: Timeout trigger 20 seconds
Wenn mehrere Personen gleichzeitig Gantt exportieren, kann der Prozess mehr Zeit in Anspruch nehmen als üblich. Aber das ist in Ordnung, da die Zeit, die für die Exportanfrage eines bestimmten Benutzers aufgewendet wird, separat gezählt wird.
Wenn Sie große Diagramme exportieren müssen, können Sie ein eigenständiges Exportmodul verwenden. Das Exportmodul wird kostenlos bereitgestellt, falls Sie Gantt unter einer Commercial, Enterprise oder Ultimate Lizenz erhalten haben, oder Sie können das Modul separat kaufen.
Multi-page export
Bitte beachten Sie, dass das Exportmodul nicht die technischen Möglichkeiten besitzt, Folgendes zu tun:
- die Abtrenntposition zu kontrollieren (damit Aufgaben möglicherweise mitten zwischen den Seiten geschnitten werden)
- Skalen auf jeder Seite anzuzeigen, ohne dass Aufgaben überlagert werden
- Kopf- und Fußzeile auf jeder Seite anzuzeigen, ohne die Aufgabenzeilen zu überlagern
Um die oben beschriebenen Aufgaben zu erfüllen, müssen Sie benutzerdefinierte Lösungen anwenden. Einige davon finden Sie unten.
Exportieren von Daten automatisch in einer Datei
Für den Multi-Page-Export in einer Datei können Sie entweder den Online-Exportdienst (mit Zeitbeschränkungen) verwenden oder das eigenständige Exportmodul (ohne Beschränkungen). Alles, was Sie tun müssen, ist das Attribut merge_pages des Objekts additional_settings zu verwenden:
gantt.exportToPDF({
additional_settings: {
merge_pages: true,
format: "A4"
}
});
Der Exportdienst eignet sich gut, wenn ein Diagramm nicht sehr groß ist. Ist es groß, werden die Daten teilweise exportiert. In diesem Fall können Sie mehrere Datenausgaben manuell durchführen oder das Exportmodul verwenden. Das Exportmodul exportiert alle Daten von selbst und liefert eine einzige Datei mit allen Seiten.
Related sample: Multi-page export in one file
Der Nachteil dieser Methode besteht darin, dass der Datenaustausch deutlich mehr Zeit in Anspruch nimmt als der Export aller Daten auf einer Seite. Um weniger Zeit für den Export der Gantt-Daten zu verwenden, können Sie den Zoom-Level ändern und die Daten in Wochen, Monaten oder Jahren rendern, since dann Gantt weniger Breite einnimmt und Sie den Export weniger oft durchführen müssen.
Check the detailed overview of the multi-page export in one PDF file in the related blog article.
Making several data exports manually
Da Gantt-Diagramme meist größer als Standard-Seitengrößen sind, erfasst der Export jedes Mal nur den linken Teil. Um alle Daten zu exportieren, sind mehrere Exporte nötig, wobei das Diagramm jeweils nach links verschoben wird.
Um das Gantt-Diagramm in der exportierten Datei zu verschieben, fügen Sie diese Stilregel zu #gantt_here über den Parameter header hinzu:
const width = 1000;
const height = 1000;
const total_width = gantt.$task_bg.scrollWidth + gantt.$grid.scrollWidth;
for (let 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 ('A3', 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.
const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);
Related sample: Export to the file of defined format
Hinweis: Wenn beim mehrseitigen Export nur eine PDF-Datei erzeugt wird, blockiert Ihr Browser möglicherweise Pop-ups, da mehrere Exporte gleichzeitig Pop-ups öffnen. Aktivieren Sie Pop-ups und versuchen Sie den Export erneut.
Displaying timeline and grid headers on every page in the exported file
Um Timeline- und Grid-Kopfzeilen auf jeder Seite der exportierten Datei anzuzeigen, aktivieren Sie die Option fixed_headers innerhalb von additional_settings. Dies funktioniert nur, wenn merge_pages ebenfalls aktiviert ist:
gantt.exportToPDF({
additional_settings: {
merge_pages: true,
fixed_headers: true,
format: "A4"
}
});
Wenn Sie dies ohne Konfiguration möchten, beispielsweise beim Export mehrerer Dateien und manuellem Zusammenführen, verwenden Sie dieses CSS:
.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
position: fixed;
top:0;
z-index:99999;
}
Related API
- exportToMSProject
- exportToPrimaveraP6
- exportToExcel
- exportToICal
- exportToPNG
- exportToJSON
- importFromExcel
- importFromPrimaveraP6
- importFromMSProject