Zum Hauptinhalt springen

exportToPDF

Description​

Exportiert ein Gantt-Diagramm in eine PDF-Datei

exportToPDF: (export?: any) => void

Parameters​

  • export - (optional) object - optionale Einstellungen für den Export (siehe Details unten)

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-2013",
    end:"11-04-2013",
    skin:'terrace',
    data:{ },
    server:"https://myapp.com/myexport/gantt",
    raw:true,
    callback: function(res){
        alert(res.url);
    }
});

Details​

Hinweis

Diese Methode ist Teil der export-Erweiterung, daher stellen Sie sicher, dass das Plugin export_api aktiviert ist. Weitere Informationen finden Sie im Artikel Export to PDF and PNG.

Hinweis

Für Gantt-Versionen vor 8.0 müssen Sie https://export.dhtmlx.com/gantt/api.js in Ihre Seite einbinden, um den Online-Exportservice zu aktivieren, zum Beispiel:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

Die Methode exportToPDF akzeptiert ein Objekt als Parameter mit verschiedenen optionalen Eigenschaften:

name(string) der Dateiname für die exportierte PDF
skin('terrace', 'skyblue', 'meadow', 'broadway') das Theme, das auf das exportierte Gantt-Diagramm angewendet wird
locale(string) legt die Sprache fest, die im exportierten Gantt-Diagramm verwendet wird
start(string) definiert das Startdatum für den angezeigten Datenbereich im exportierten Diagramm. Das Datumsformat folgt den Einstellungen in date_format
end(string) definiert das Enddatum für den angezeigten Datenbereich im exportierten Diagramm. Das Datumsformat folgt den Einstellungen in date_format
data(object) ermöglicht die Angabe einer benutzerdefinierten Datenquelle für das exportierte Diagramm
header(string) HTML-Inhalt, der als Kopfzeile in der exportierten PDF eingefügt wird
footer(string) HTML-Inhalt, der als Fußzeile in der exportierten PDF eingefügt wird
server(string) URL des API-Endpunkts, der die Exportanfrage verarbeitet. Kann für einen lokalen Exportservice verwendet werden. Standard ist https://export.dhtmlx.com/gantt
raw(boolean) wenn true, wird das Gantt-Markup exakt so exportiert, inklusive benutzerdefinierter Elemente. Standard ist false.Mehr Details
callback(function) Funktion, die ein JSON-Objekt mit einer url-Eigenschaft erhält, um die generierte PDF-Datei herunterzuladen
additional_settings(object) zusätzliche Einstellungen, die Folgendes umfassen können:
  • format - (string) Ausgabe-Dateiformat: 'A3', 'A4', 'A5', 'Legal', 'Letter', 'Tabloid'
  • landscape - (boolean) legt Hoch- oder Querformat fest; funktioniert nur, wenn "format" angegeben ist
  • width - (string|number|"content") Seitenbreite, verwendet beim Export mehrerer Seiten
  • height - (string|number|"content") Seitenhöhe, verwendet beim Export mehrerer Seiten
  • merge_pages - (boolean) ermöglicht den Export mehrerer Seiten in eine einzelne Datei; wenn false, sind mehrere Exporte nötig, um alle Daten abzudecken
  • fixed_headers - (boolean) zeigt Grid- und Timeline-Kopfzeilen auf jeder Seite; Standard ist false und erfordert aktiviertes merge_pages

Zeitliche Beschränkungen​

Hinweis

Der Exportservice erzwingt Zeitlimits.

Wenn der Export länger als 20 Sekunden dauert, wird der Vorgang abgebrochen und folgender Fehler erscheint:

Error: Timeout trigger 20 seconds

Wenn viele Benutzer gleichzeitig Gantt-Diagramme exportieren, kann der Prozess länger dauern als gewöhnlich. Die Exportzeit wird jedoch für jeden Benutzer separat erfasst.

Hinweis

Für den Export großer Diagramme empfiehlt sich die Verwendung des Standalone-Exportmoduls. Dieses Modul ist kostenlos mit einer Commercial, Enterprise oder Ultimate-Lizenz oder kann separat hier erworben werden.

Mehrseitiger Export​

Beachten Sie, dass das Exportmodul nicht in der Lage ist:

  • Seitenumbrüche zu kontrollieren, sodass Aufgaben über Seiten verteilt werden können
  • Skalen auf jeder Seite anzuzeigen, ohne dass sich Aufgaben überlappen
  • Kopf- und Fußzeilen auf jeder Seite anzuzeigen, ohne dass sich Aufgabenreihen überlappen

Für diese Fälle sind benutzerdefinierte Lösungen erforderlich. Einige Beispiele finden Sie unten.

Automatischer Export der Daten in eine Datei​

Für den Export mehrerer Seiten in eine einzige Datei können Sie den Online-Exportservice (mit Zeitlimits) oder das standalone Exportmodul (ohne Limits) verwenden. Setzen Sie einfach die Option merge_pages innerhalb von additional_settings:

gantt.exportToPDF({
    additional_settings: {
        merge_pages: true, /*!*/
        format: "A4"
    }
});

Der Online-Exportservice arbeitet gut bei kleineren Diagrammen. Bei großen Diagrammen kann es vorkommen, dass die Daten in Teilen exportiert werden. In diesem Fall können Sie mehrere manuelle Exporte durchführen oder das Exportmodul verwenden, das alle Daten verarbeitet und eine einzelne Datei mit allen Seiten erzeugt.

Hinweis

Sample: Mehrseitiger Export in einer Datei

Beachten Sie, dass der mehrseitige Export länger dauert als der Export aller Daten auf einer Seite. Um den Vorgang zu beschleunigen, können Sie die Zoomstufe auf Wochen, Monate oder Jahre einstellen, was die Breite des Gantt-Diagramms und somit die Exportzeit reduziert.

Weitere Details finden Sie im zugehörigen Blogartikel.

Mehrfache Exporte manuell durchführen​

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,
    }
  });
}
Hinweis

Sample: Export in Datei mit spezifizierter Größe

Wenn Sie in ein bestimmtes Format wie 'A3' exportieren, beachten Sie, dass das Dateiformat in Millimetern angegeben ist, während HTML-Größen in Pixeln gemessen werden. Sie müssen Millimeter in Pixel umrechnen für den Verschiebungswert:

const widthMM = 297;
const width = widthMM / (25.4 inch / 96 PDF PPI);
Hinweis

Sample: Export in Datei mit spezifiziertem 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.

blocked_popup

Anzeige von Timeline- und Grid-Kopfzeilen auf jeder Seite​

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"
    }
});
Hinweis

Sample: Mehrseitiger Export mit Kopfzeilen auf jeder Seite

Hinweis

Sample: Mehrseitiger Export mit Kopfzeilen auf jeder Seite für Resource-Panel-Ansicht

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;
}