exportToPDF

Exportiert ein Gantt-Diagramm in das PDF-Format

void exportToPDF( [object export] );
exportobjectoptional, ein Objekt mit Exporteinstellungen (siehe Details)

Example

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

Details

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):

Zeitbeschränkungen

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.

Mehrseiten-Export

Bitte beachten Sie, dass das Exportmodul keine technischen Möglichkeiten hat, um Folgendes zu tun:

  • die Schnittposition zu steuern (so können die Aufgaben in der Mitte zwischen den Seiten geschnitten werden)
  • Skalen auf jeder Seite anzuzeigen, ohne Aufgaben zu überlagern
  • den Header und den Footer auf jeder Seite anzuzeigen, ohne die Aufgabenreihen zu überlagern

Um die oben beschriebenen Aufgaben zu erledigen, müssen Sie benutzerdefinierte Lösungen anwenden. Einige davon sind unten angegeben.

Daten automatisch in einer Datei exportieren

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.

Mehrere Datenexporte manuell durchführen

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.

blocked_popup

Anzeige der Timeline- und Grid-Header auf jeder Seite in der exportierten Datei

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

Related sample:  Mehrseiten-Export mit Timeline- und Grid-Headern auf jeder Seite für die Ressourcenpanelansicht

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;
}
See also
Zurück nach oben