exportToPDF

exportiert ein Gantt-Diagramm in eine PDF-Datei

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

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

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.

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.

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

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

Related 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.

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

Related sample:  Mehrseitiger Export mit Kopfzeilen auf jeder Seite

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