Export nach PDF und PNG
dhtmlxGantt bietet einen Online-Exportdienst an, der es Ihnen ermöglicht, das Gantt-Diagramm in das PDF oder PNG Format zu exportieren.
Der Dienst ist kostenlos, aber die output PDF/PNG-Datei enthält das Wasserzeichen der Bibliothek. Um ohne Wasserzeichen zu exportieren, benötigen Sie eine gültige Lizenz – das Export-Ergebnis steht während der gültigen Support-Periode (12 Monate für alle PRO-Lizenzen) ohne Wasserzeichen zur Verfügung.
Es gibt mehrere Exportdienste. Sie können sie lokal auf Ihrem Computer installieren und das Gantt-Diagramm lokal nach PDF oder PNG exportieren. Beachten Sie, dass Exportdienste nicht im Gantt-Paket enthalten sind; lesen Sie den entsprechenden Artikel, um die Nutzungsbedingungen jedes einzelnen Dienstes zu erfahren.
Einschränkungen des Online-Exportdienstes
Der Exportdienst unterliegt zeitlichen Beschränkungen sowie Beschränkungen der Anfragedatenmenge.
Zeitlimits
Wenn der Prozess länger als 20 Sekunden dauert, wird der Export abgebrochen und Folgendes tritt ein:
Error: Timeout trigger 20 seconds
Wenn mehrere Personen das Gantt zum selben Zeitpunkt exportieren, kann der Prozess länger dauern als üblich. Das ist jedoch unproblematisch, da die Zeit, die für die Exportanfrage eines bestimmten Benutzers aufgewendet wird, separat gezählt wird.
Beschränkungen der Anfragedatenmenge
Es gibt einen gemeinsamen API-Endpunkt https://export.dhtmlx.com/gantt, der für alle Exportmethoden (exportToPDF, exportToPNG, exportToMSProject, etc.) dient. Maximale Anfragedatenmenge: 10 MB.
Es gibt außerdem einen separaten API-Endpunkt https://export.dhtmlx.com/gantt/project, der speziell für die MSProject und
Primavera P6
Export/Import-Dienste (exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6 nur). Maximale Anfragedatenmenge: 40 MB.
Verwendung der Exportmodule
Wenn Sie große Diagramme exportieren müssen, können Sie ein eigenständiges Exportmodul verwenden. Das Exportmodul ist kostenlos, falls Sie Gantt unter einer Commercial-, Enterprise- oder Ultimate-Lizenz erworben haben, oder Sie können das Modul separat erwerben.
Mehr zur Nutzung des Exportmoduls für PDF lesen.
Export nach PDF
Um das Gantt-Diagramm als PDF-Dokument zu exportieren, führen Sie die folgenden Schritte aus:
- Um die Export-/Import-Funktionalität zu verwenden, aktivieren Sie das export_api-Plugin über die plugins-Methode:
gantt.plugins({
export_api: true
});
Dadurch können Sie entweder den Online-Exportdienst oder ein lokales Exportmodul verwenden.
Wenn Sie eine Gantt-Version älter als 8.0 verwenden, müssen Sie die Datei https://export.dhtmlx.com/gantt/api.js in Ihre Seite einbinden, um die Exportfunktionalität zu aktivieren, z.B.:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
- Rufen Sie die Methode exportToPDF auf, um das Gantt-Diagramm zu exportieren:
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'/>
<script>
gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
Zugehöriges Beispiel: Export data from Gantt
Export nach PNG
Um das Gantt-Diagramm als PNG-Bild zu exportieren, führen Sie die folgenden Schritte aus:
- Um den Online-Exportdienst zu verwenden, aktivieren Sie das export_api-Plugin über die plugins-Methode:
gantt.plugins({
export_api: true
});
Wenn Sie eine Gantt-Version älter als 8.0 verwenden, müssen Sie die Datei https://export.dhtmlx.com/gantt/api.js in Ihre Seite 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>
- Rufen Sie die Methode exportToPNG auf, um das Gantt-Diagramm zu exportieren:
<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'/>
<script>
gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
Zugehöriges Beispiel: Export data from Gantt
Parameter der Exportmethoden
Die Methoden exportToPDF und exportToPNG nehmen als Parameter dasselbe Objekt mit einer Reihe von Eigenschaften (alle Eigenschaften sind optional):
| name | (string) der Name der Ausgabedatei |
| skin | (string) der Skin des Ausgabegantt-Diagramms |
| locale | (string) legt die Sprache fest, die im Ausgabegantt-Diagramm verwendet wird |
| start | (string) legt das Startdatum des Datenbereichs fest, der im Ausgabegantt-Diagramm dargestellt wird. Das Datumsformat wird durch die date_format config festgelegt |
| end | (string) legt das Enddatum des Datenbereichs fest, der im Ausgabegantt-Diagramm dargestellt wird. Das Datumsformat wird durch die date_format config festgelegt |
| data | (object) legt eine benutzerdefinierte Datenquelle fest, die im Ausgabegantt-Diagramm dargestellt wird |
| header | (string) gibt den Header an, der dem Ausgabebild hinzugefügt wird. Hinweis: Sie können hier beliebiges HTML verwenden |
| footer | (string) gibt den Footer an, der dem Ausgabebild hinzugefügt wird. Hinweis: Sie können hier beliebiges HTML verwenden |
| server | (string) setzt den API-Endpunkt für die Anfrage. Kann mit der lokalen Installation des Exportdienstes verwendet werden. Der Standardwert ist https://export.dhtmlx.com/gantt |
| raw | (boolean) definiert, dass alle Gantt-Markups exportiert werden, wie sie sind, mit allen benutzerdefinierten Elementen. false standardmäßig. Details unten lesen |
| callback | (function) Falls Sie eine URL zum Herunterladen einer generierten PDF/PNG-Datei erhalten möchten, kann die callback-Eigenschaft verwendet werden. Sie empfängt ein JSON-Objekt mit der url-Eigenschaft |
| additional_settings | (object) ein Objekt mit zusätzlichen Einstellungen für die exportToPDF()-Methode. Das Objekt kann die folgenden Attribute enthalten:
|
| additional_settings | (object) ein Objekt mit zusätzlichen Einstellungen für die exportToPNG()-Methode. Das Objekt kann folgende Attribute enthalten:
|
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);
}
});
gantt.exportToPNG({
name: "mygantt.png",
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);
}
});
Name der Ausgabedatei
Um einen benutzerdefinierten Namen für die Ausgabedatei festzulegen, verwenden Sie die name-Eigenschaft im Parameter der Methoden exportToPDF/exportToPNG:
gantt.exportToPDF({
name: "my_beautiful_gantt.pdf"
});
Sprache der Ausgabedatei
Standardmäßig wird das Gantt-Diagramm in derselben Sprache exportiert, in der es auf der Seite gezeigt wird.
Um eine benutzerdefinierte Sprache für die Ausgabedatei festzulegen, verwenden Sie die locale-Eigenschaft im Parameter der Methoden exportToPDF/exportToPNG:
gantt.exportToPDF({
name: "mygantt.pdf",
locale: "de"
});
Daten zum Export
Um die Aufgaben festzulegen, die im Ausgabedokument (PDF oder PNG) angezeigt werden sollen, verwenden Sie eine der folgenden Methoden:
- Geben Sie den Datumsbereich der Ausgabedaten an.
- Geben Sie eine benutzerdefinierte Datenquelle für den Export an.
Angabe des Datumsbereichs der Ausgabedaten
Um den Bereich der Aufgaben festzulegen, der im Ausgabedokument dargestellt wird, verwenden Sie die Eigenschaften start und end im Parameter der Methoden exportToPDF/exportToPNG:
gantt.exportToPDF({
name: "mygantt.pdf",
start: "01-04-2026",
end: "11-04-2026"
});
Hinweis: Das Datumsformat wird durch die date_format-Konfiguration festgelegt.
Festlegen einer benutzerdefinierten Datenquelle zum Export
Um das Gantt-Diagramm mit einem benutzerdefinierten Datenbestand zu exportieren (also nicht mit den Daten, die im ursprünglichen Gantt-Diagramm angezeigt werden), verwenden Sie die Eigenschaft data im Parameter der Methode exportToPDF/exportToPNG:
gantt.exportToPDF({
data: {
tasks: [
{ id: 1, text: "Project #1", start_date: "01-04-2026", duration: 18 },
{ id: 2, text: "Task #1", start_date: "02-04-2026", duration: 8, parent: 1 },
{ id: 3, text: "Task #2", start_date: "11-04-2026", 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" }
]
}
});
Hinweis: Sie können keinen URL-Wert für den Parameter data angeben, es muss sich um ein Datenobjekt handeln.
Skin des Ausgabegantt-Diagramms
Standardmäßig wird das Gantt-Diagramm mit dem gleichen Skin exportiert, wie es auf der Seite angezeigt wird.
Um einen anderen Skin für die Ausgabedatei PNG oder PDF festzulegen, verwenden Sie die Eigenschaft skin im Parameter der Methoden exportToPDF/exportToPNG:
gantt.exportToPDF({
name: "mygantt.pdf",
skin: "material"
});
Checken Sie die vollständige Liste der verfügbaren Gantt-Skins.
Kopf-/Fußzeile der Ausgabedatei
Um eine Kopf-/Fußzeile zur Ausgabedatei (PNG oder PDF) hinzuzuf ügen, verwenden Sie die Eigenschaften header/footer im Parameter der Methoden exportToPDF/exportToPNG:
Hinweis: Beim Festlegen der Parameter können Sie beliebiges HTML verwenden. Beim Einbinden von Bildern beachten Sie, dass globale Pfade als Werte des "src"-Attributs gesetzt werden müssen.
gantt.exportToPDF({
name: "mygantt.pdf",
header: "<h1>My company</h1>",
footer: "<h4>Bottom line</h4>"
});
Header/Footer für jede Seite der Ausgabedatei PDF
Um eine Kopf-/Fußzeile für jede Seite der Ausgabedatei PDF hinzuzufügen, verwenden Sie die Eigenschaften header/footer im additional_settings-Objekt der exportToPDF-Methode.
Sie können die Nummer der aktuellen Seite durch das Element mit class="pageNumber" und die Gesamtseitenzahl durch das Element mit class="totalPages" in den Eigenschaften header/footer angeben:
gantt.exportToPDF({
additional_settings: {
format: "A4",
// korrekte Ränder sind zwingend erforderlich, damit Kopf-/Fußzeilen gerendert werden
margins: {
top: 10,
bottom: 10,
left: 0.1,
right: 1
},
header: "Jede Seitenkopfzeile",
footer: 'Seite: <span className="pageNumber"></span>/<span className="totalPages"></span>'
}
});
Beachten Sie, dass diese Einstellungen nur funktionieren, wenn auch margins angegeben sind und genügend Platz vorhanden ist, um Kopf-/Fußzeilen korrekt anzuzeigen. Andernfalls werden Kopfzeilen/Fußzeilen außerhalb des Gantt gerendert. Es wird empfohlen, als Minimalrand 10 zu verwenden, damit lediglich Textzeilen dargestellt werden können.
Ränder der Ausgabedatei PDF
Um Randabstände zur Ausgabedatei PDF hinzuzufügen, verwenden Sie die Eigenschaft margins im additional_settings-Objekt der Methode exportToPDF. Die Eigenschaft margins funktioniert sowohl für den einseitigen Export als auch mehrseitiger Export.
Die Werte der Rand-Einstellungen werden als Zahlen angegeben:
gantt.exportToPDF({
additional_settings: {
margins: {
top: 5,
bottom: 10,
left: 2,
right: 2
},
},
});
Wenn einige der Rand-Einstellungen nicht angegeben sind, werden sie ignoriert.
Die Werte werden standardmäßig in Millimetern angegeben, aber Sie können die Randwerte auch in Zoll festlegen, indem Sie die Eigenschaft unit: "inch" setzen:
gantt.exportToPDF({
additional_settings: {
margins: {
top: 5,
bottom: 10,
left: 2,
right: 2,
unit: "inch"
},
},
});
Benutzerdefinierter Stil für die Ausgabedatei
Um einen benutzerdefinierten Stil für das Gantt zu verwenden, liefern Sie das Stylesheet mit Ihren eigenen CSS-Klassen:
- über einen Link:
gantt.exportToPDF({
name: "calendar.pdf",
header: '<link rel="stylesheet" href="http://mysite.com/custom.css">'
});
- oder über das 'style'-Tag:
gantt.exportToPDF({
name: "calendar.pdf",
header: '<style>... benutzerdefinierte CSS-Klassen hier ...</style>'
});
Hinweis: Die oben genannte Lösung funktioniert für die globale HTTP-Referenz. Wenn Sie CSS-Klassen in einer Intranet-/Lokalen-Umgebung verwenden, können Sie alle Stile wie folgt einbetten:
gantt.exportToPDF({
header: "<style>.tier1{background: red; color:white;}</style>"
});
Für weitere Beispiele lesen Sie den Artikel How to add resource chart or custom styles in the exported PDF file](guides/how-to.md#how-to-add-resource-chart-or-custom-styles-in-the-exported-pdf-file).
Sammeln aller Stile für die Exportfunktion
Manchmal sind Stile in verschiedenen Dateien definiert, die öffentlich nicht zugänglich sind, und es ist umständlich, Stile von jeder einzelnen Datei einzeln zu importieren. Es gibt eine Möglichkeit, alle Stile für den Export zusammenzufassen.
Alle Stile werden im Objekt document.styleSheets auf einer HTML-Seite gespeichert. Wird das gleiche Site-Element (style/link) verwendet, können Sie alle Stile sammeln und dann im header angeben. Unten sehen Sie ein Beispiel:
const styles = [];
for (const styleSheet of document.styleSheets) {
try {
const rules = styleSheet.cssRules;
for (const rule of rules) {
styles.push(rule.cssText);
}
} catch (error) {
// Stile, die nicht gelesen werden können, ignorieren
}
}
gantt.exportToPDF({
raw: true,
header: "<style>" + styles.join(" ") + "</style>"
});
Zugehöriges Beispiel: Export Gantt with custom icons to PDF
Zugehöriges Beispiel: Export Gantt with resource load diagram to PDF with no need to specify styles
Exportieren benutzerdefinierter Markups und Stile
Standardmäßig wird das Gantt-Diagramm basierend auf der angegebenen Konfiguration und den geladenen Daten exportiert, während custom elements und einige Vorlagen nicht exportiert werden. Um die gesamte Gantt-Markup wie es ist zu exportieren, können Sie die Eigenschaft raw: true im Parameter der Methoden exportToPDF/exportToPNG setzen.
gantt.exportToPDF({
raw: true
});
Beachten Sie, dass benutzerdefinierte Elemente das Bereitstellen von custom styles erfordern, damit sie korrekt dargestellt werden.
Beachten Sie, dass die Nutzung dieses Modus die Größe der API-Anfrage erhöht. Große Diagramme können das Limit des Online-Exports von 10 MB überschreiten und möglicherweise auf diesem Weg nicht exportiert werden. In einem solchen Fall müssen Sie einen Exportdienst lokal installiert haben und die Anfragedaten erhöhen.
Schauen Sie in den Systemanforderungen nach, wie Sie Exportdienste lokal installieren.
Exportieren von HTML-Elementen
Beim Export des Gantt-Diagramms in die Formate PNG und PDF sollten Sie beachten, dass der Export von HTML-Elementen aufgrund potenzieller Sicherheitsrisiken eingeschränkt ist.
Es gibt HTML-Elemente, die nicht vollständig für den Export zulässig sind, wie <canvas>, <svg>, <script> und Bilder mit dem src-Attribut, das ein Base64-Bild enthält. Es gibt jedoch sichere Methoden, Bilder im SVG- und Base64-Format zu exportieren:
- Sie können ein <img/>-Element mit dem src-Attribut verwenden, das eine URL des Bildes im SVG-Format enthält (geeignet für PNG- und JPG-Formate, funktioniert nicht mit Base64), z.B.:
<img src="https://www.svgrepo.com/download/530597/hat.svg">
- Sie können Stil-Elemente verwenden, wie z.B. background oder background-image, und das
url-Attribut mit dem Link zum Bild oder einem Bild im Base64-Format als dessen Wert angeben (geeignet für PNG/JPG/SVG-Formate)
.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;
}
Zugehöriges Beispiel: Exporting safe and insecure HTML elements to PDF
Wenn Sie ein Exportmodul haben und HTML-Elemente exportieren müssen, die von unserem Online-Exportserver nicht unterstützt werden, können Sie eine Support-Anfrage stellen, um Anweisungen zu erhalten, welche Änderungen Sie an Ihrem Modul vornehmen müssen, um Einschränkungen zu entfernen. Beachten Sie jedoch, dass Ihr Server anfällig für XSS-Angriffe sein wird.