Exportiert ein Gantt-Diagramm in das PDF-Format
export | object | optional, ein Objekt mit Exporteinstellungen (siehe Details) |
gantt.exportToPDF();
//oder
gantt.exportToPDF({
name: "mygantt.pdf"
});
gantt.exportToPDF({
name:"mygantt.pdf",
header:"<h1>Meine Firma</h1>",
footer:"<h4>Fußzeile</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);
}
});
Diese Methode ist in der export-Erweiterung definiert, daher müssen Sie das export_api Plugin aktivieren. Lesen Sie die Details im Artikel Exportieren als PDF und PNG.
Wenn Sie eine Gantt-Version älter als 8.0 verwenden, müssen Sie https://export.dhtmlx.com/gantt/api.js auf Ihrer Seite einfügen, um den Online-Exportdienst zu aktivieren, z.B.:
<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>
Die Methode exportToPDF nimmt als Parameter ein Objekt mit einer Reihe von Eigenschaften (alle Eigenschaften sind optional):
name | (string) der Name der Ausgabedatei |
skin | ('terrace', 'skyblue', 'meadow', 'broadway') das Skin des ausgegebenen Gantt-Diagramms |
locale | (string) setzt die Sprache, die im ausgegebenen Gantt-Diagramm verwendet wird |
start | (string) setzt das Startdatum des Datenbereichs, der im ausgegebenen Gantt-Diagramm präsentiert wird. Das Datumsformat wird durch die date_format Konfiguration definiert |
end | (string) setzt das Enddatum des Datenbereichs, der im ausgegebenen Gantt-Diagramm präsentiert wird. Das Datumsformat wird durch die date_format Konfiguration definiert |
data | (object) setzt eine benutzerdefinierte Datenquelle, die im ausgegebenen Gantt-Diagramm präsentiert wird |
header | (string) spezifiziert den Header, der dem ausgegebenen PDF-Bild hinzugefügt wird. Beachten Sie, dass Sie hier beliebiges HTML verwenden können |
footer | (string) spezifiziert den Footer, der dem ausgegebenen PDF-Bild hinzugefügt wird. Beachten Sie, dass Sie hier beliebiges HTML verwenden können |
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 das gesamte Gantt-Markup so wie es ist exportiert wird, mit allen benutzerdefinierten Elementen. Standardmäßig false. Lesen Sie die Details |
callback | (function) Wenn Sie eine URL erhalten möchten, um eine generierte PDF-Datei herunterzuladen, kann die callback-Eigenschaft verwendet werden. Sie erhält ein JSON-Objekt mit der url-Eigenschaft |
additional_settings | (object) ein Objekt mit zusätzlichen Einstellungen. Das Objekt kann die folgenden Attribute enthalten:
|
Der Exportdienst hat zeitliche Beschrä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 länger dauern als gewöhnlich. 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 standalone Exportmodul verwenden. Das Exportmodul wird kostenlos zur Verfügung gestellt, wenn Sie Gantt unter Commercial, Enterprise oder Ultimate Lizenz erworben haben, oder Sie können das Modul separat kaufen.
Bitte beachten Sie, dass das Exportmodul keine technischen Möglichkeiten hat, um Folgendes zu tun:
Um die oben beschriebenen Aufgaben zu erledigen, müssen Sie benutzerdefinierte Lösungen anwenden. Einige davon sind unten angegeben.
Für den Mehrseiten-Export in einer Datei können Sie entweder den Online-Exportdienst (mit zeitlichen Einschränkungen) oder das standalone Exportmodul (ohne Einschränkungen) verwenden. Alles, was Sie tun müssen, ist, das merge_pages Attribut des additional_settings Objekts zu verwenden:
gantt.exportToPDF({
additional_settings: {
merge_pages: true, format: "A4"
}
});
Der Exportdienst eignet sich gut, wenn ein Diagramm nicht sehr groß ist. Wenn ein Diagramm groß ist, werden die Daten teilweise exportiert. In diesem Fall können Sie mehrere Datenexporte manuell durchführen oder das Exportmodul verwenden. Das Exportmodul wird alle Daten selbst exportieren und eine Datei mit allen Seiten bereitstellen.
Related sample: Mehrseiten-Export in einer Datei
Der Nachteil dieser Methode ist, dass der Datenexport viel mehr Zeit in Anspruch nimmt als der Export aller Daten auf einer Seite. Um weniger Zeit mit dem Export von Gantt-Daten zu verbringen, können Sie den Zoom-Level ändern und die Daten in Wochen, Monaten oder Jahren rendern, da Gantt dann weniger Breite benötigt und Sie den Export seltener anwenden.
Sehen Sie sich die detaillierte Übersicht über den Mehrseiten-Export in einer PDF-Datei im zugehörigen Blog-Artikel an.
Da die Größen des Gantt-Diagramms fast immer die Standarddokumentgrößen überschreiten, benötigt das Diagramm mehr als eine Seite, um hineinzupassen. Beim Export von Gantt wird jedes Mal nur der linke Teil exportiert. Um einen Mehrseiten-Export durchzuführen, muss Gantt mehrmals exportiert werden, wobei Gantt jedes Mal nach links verschoben wird.
Um Gantt in der exportierten Datei zu verschieben, müssen Sie die folgende Stilregel zu #gantt_here im header Parameter hinzufügen:
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 zur Datei definierter Größen
Falls Sie Gantt in ein bestimmtes Format ('A3', zum Beispiel) exportieren möchten, beachten Sie, dass das Dateiformat in Millimetern definiert ist, aber die Größe in HTML in Pixeln angegeben wird. Daher müssen Sie den Verschiebungswert von Millimetern in Pixel umrechnen.
const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);
Related sample: Export zur Datei definierten Formats
Hinweis, wenn Sie das mehrseitige Gantt exportieren, aber nur eine PDF-Datei erhalten, bedeutet das, dass der Browser die Pop-ups blockiert, weil die Funktion sie gleichzeitig öffnet.
In diesem Fall müssen Sie die Pop-ups aktivieren und den Export erneut versuchen.
Sie können die Anzeige der Timeline- und Grid-Header auf jeder Seite in der exportierten Datei mit Hilfe des fixed_headers Attributs des additional_settings Objekts aktivieren. Beachten Sie, dass diese Funktion nur mit dem ebenfalls aktivierten merge_pages Attribut funktioniert:
gantt.exportToPDF({
additional_settings: {
merge_pages: true, fixed_headers: true, format: "A4"
}
});
Related sample: Mehrseiten-Export mit Timeline- und Grid-Headern auf jeder Seite
Falls Sie es ohne die Konfiguration zum Laufen bringen müssen, z.B. wenn Sie mehrere Exportvorgänge durchführen und die Dateien manuell zusammenführen möchten, können Sie die folgenden Stile verwenden:
.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
position: fixed;
top:0;
z-index:99999;
}