Exportieren als PDF und PNG

dhtmlxGantt bietet einen Online-Exportdienst, der es ermöglicht, Ihr Gantt-Diagramm entweder als PDF oder als PNG Datei zu speichern.

Es gibt auch Exportdienste, die lokal auf Ihrem Rechner installiert werden können. Dies ermöglicht den Export von Gantt-Diagrammen in PDF oder PNG, ohne auf den Online-Dienst angewiesen zu sein. Beachten Sie, dass diese Exportdienste nicht im Gantt-Paket enthalten sind. Weitere Informationen zur Nutzung finden Sie im entsprechenden Artikel.

Zeitlimits

Wenn der Exportvorgang länger als 20 Sekunden dauert, wird er gestoppt und Sie erhalten eine Fehlermeldung wie diese:

Error: Timeout trigger 20 seconds

Wenn mehrere Benutzer gleichzeitig Gantt-Diagramme exportieren, kann der Vorgang verlangsamt werden. Die für die Anfrage eines jeden Benutzers aufgewendete Zeit wird jedoch individuell gezählt.

Grenzen bei der Anfragengröße

Der Haupt-API-Endpunkt für alle Exportmethoden (exportToPDF, exportToPNG, exportToMSProject, etc.) ist https://export.dhtmlx.com/gantt. Die maximale Anfragengröße beträgt 10 MB.

Für die Export-/Importdienste von MSProject und Primavera P6 (exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6) gibt es einen separaten API-Endpunkt https://export.dhtmlx.com/gantt/project, mit einer maximalen Anfragengröße von 40 MB.

Für weitere Details zur Verwendung des Exportmoduls für PDFs lesen Sie diese Anleitung.

Um Ihr Gantt-Diagramm als PDF-Dokument zu speichern, folgen Sie diesen Schritten:

• Aktivieren Sie das export_api Plugin mit der Methode plugins:

gantt.plugins({
    export_api: true
});

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

• Verwenden Sie die exportToPDF Methode, um das Diagramm zu exportieren:

<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

Um Ihr Gantt-Diagramm als PNG-Bild zu speichern, folgen Sie diesen Schritten:

• Aktivieren Sie das export_api Plugin mit der Methode plugins:

gantt.plugins({
    export_api: true
});

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

• Verwenden Sie die exportToPNG Methode, um das Diagramm zu exportieren:

<input value="Export to PNG" type="button" onclick='gantt.exportToPNG()'> 
<script>
    gantt.init("gantt_here");
    gantt.parse(demo_tasks);
</script>

Related sample:  Export data from Gantt

Die Methoden exportToPDF und exportToPNG akzeptieren ein Objekt mit mehreren optionalen Eigenschaften:

Aufrufen von Exportmethoden mit optionalen Eigenschaften

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);
    }
});
 
gantt.exportToPNG({
    name:"mygantt.png",
    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);
    }
});

Um Ihrer Ausgabedatei einen benutzerdefinierten Namen zu geben, verwenden Sie die name Eigenschaft in den Methoden exportToPDF/exportToPNG:

gantt.exportToPDF({
    name:"my_beautiful_gantt.pdf"});

Standardmäßig verwendet das exportierte Gantt-Diagramm dieselbe Sprache wie auf der Seite angezeigt. Um eine andere Sprache festzulegen, verwenden Sie die locale Eigenschaft in den Methoden exportToPDF/exportToPNG:

gantt.exportToPDF({
    name:"mygantt.pdf",
    locale:"de" });

Sie können steuern, welche Aufgaben in der exportierten PDF- oder PNG-Datei erscheinen, auf zwei Arten:

1. Definieren Sie den Datumsbereich für die Ausgabedaten.
2. Stellen Sie eine benutzerdefinierte Datenquelle bereit.

Definition des Datumsbereichs für Ausgabeaufgaben

Um den Bereich der Aufgaben festzulegen, die im Export enthalten sind, verwenden Sie die start und end Eigenschaften in den Methoden exportToPDF/exportToPNG:

gantt.exportToPDF({
    name:"mygantt.pdf",
    start:"01-04-2013",    end:"11-04-2013"});

Festlegen einer benutzerdefinierten Datenquelle für den Export

Wenn Sie Ihr Gantt-Diagramm mit einem benutzerdefinierten Datensatz exportieren müssen (anders als der ursprünglich im Diagramm angezeigte), können Sie die data Eigenschaft in den Parametern der Methoden exportToPDF/exportToPNG verwenden. Hier ist ein Beispiel:

gantt.exportToPDF({
    data:{        data:[
            {id:1, text:"Project #1", start_date:"01-04-2013", duration:18},
            {id:2, text:"Task #1", start_date:"02-04-2013",duration:8, parent:1},
            {id:3, text:"Task #2", start_date:"11-04-2013",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"}
        ]
    }
});

Standardmäßig verwendet das exportierte Gantt-Diagramm denselben Skin wie auf der Seite angezeigt. Wenn Sie einen anderen Skin für Ihren PNG- oder PDF-Output anwenden möchten, können Sie die skin Eigenschaft in den Parametern der Methoden exportToPDF/exportToPNG verwenden:

gantt.exportToPDF({
    name:"mygantt.pdf",
    skin:"material" });

Sehen Sie sich die vollständige Liste der verfügbaren Gantt-Skins an.

Um eine Kopf- oder Fußzeile in die exportierte PNG- oder PDF-Datei einzufügen, verwenden Sie die header und footer Eigenschaften in den Parametern der Methoden exportToPDF/exportToPNG:

gantt.exportToPDF({
    name:"mygantt.pdf",
    header:"<h1>My company</h1>",    footer:"<h4>Bottom line</h4>"});

Sie können benutzerdefinierte Stile auf das exportierte Gantt anwenden, indem Sie ein Stylesheet mit Ihren CSS-Klassen auf eine der folgenden Arten bereitstellen:

• Über einen Link:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });

• Über das 'style'-Tag:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... benutzerdefinierte CSS-Klassen hier ...</style>' });

Beachten Sie, dass die obigen Methoden für global zugängliche HTTP-Referenzen funktionieren. Für lokale oder Intranet-Umgebungen können Sie Stile direkt einbetten:

gantt.exportToPDF({
    header:"<style>.tier1{background: red; color:white;}</style>"
});

Konsolidierung von Stilen für den Export

Wenn Ihre Stile über mehrere Dateien verstreut und nicht öffentlich zugänglich sind, können Sie sie für den Export zusammenführen. Das document.styleSheets Objekt auf einer HTML-Seite enthält alle Stile. Für Stile oder Links von derselben Seite können Sie sie sammeln und in die header einfügen. Hier ist ein Beispiel:

const styles = []
for (el in document.styleSheets) {
    try {
        const rules = (document.styleSheets[el]).cssRules;
        for (rule in rules) {
            styles.push(rules[rule].cssText)
        }
    }
    catch (e) { }
}
 
gantt.exportToPDF({
    raw: true,
    header: "<style>" + styles.join(" ") + "</style>"
});

Related sample:   Exportieren von Gantt mit benutzerdefinierten Symbolen als PDF

Related sample:   Exportieren von Gantt mit Ressourcenlastdiagramm als PDF ohne Angabe von Stilen

Standardmäßig wird das Gantt-Diagramm basierend auf seiner Konfiguration und den geladenen Daten exportiert, ohne benutzerdefinierte Elemente und einige Vorlagen. Um das gesamte Gantt-Markup, einschließlich benutzerdefinierter Elemente, zu exportieren, verwenden Sie die raw:true Eigenschaft in den Parametern der Methoden exportToPDF/exportToPNG:

gantt.exportToPDF({
    raw:true
});

Beachten Sie, dass benutzerdefinierte Elemente benutzerdefinierte Stile benötigen, um korrekt angezeigt zu werden. Die Verwendung dieses Modus kann die Größe der API-Anfrage erhöhen. Große Diagramme könnten das Online-Exportlimit von 10 MB überschreiten, was einen lokal installierten Exportdienst mit einer erhöhten Anfragengröße erfordert. Überprüfen Sie die Systemanforderungen für die lokale Installation.

Beim Exportieren des Gantt-Diagramms in PNG oder PDF gibt es einige Einschränkungen hinsichtlich HTML-Elementen aufgrund potenzieller Sicherheitsprobleme. Bestimmte Elemente wie <canvas>, <svg>, <script> und Base64-Bilder im src-Attribut werden nicht vollständig unterstützt. Es gibt jedoch sichere Möglichkeiten, Bilder in SVG- und Base64-Formaten einzuschließen:

• Verwenden Sie ein <img>-Element mit dem src-Attribut, das auf eine SVG-Bild-URL verweist (funktioniert für PNG- und JPG-Formate, nicht jedoch für Base64):

<img src=https://www.svgrepo.com/download/530597/hat.svg>

• Verwenden Sie Stilattribute wie background oder background-image mit einer url, die auf ein Bild oder Base64-Daten verweist (funktioniert für PNG-, JPG- und 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;
}

Related sample:  Exportieren sicherer und unsicherer HTML-Elemente als PDF

Wenn Sie ein Exportmodul haben und unsupportete HTML-Elemente einfügen müssen, können Sie den Support um Hilfe bitten, um Ihr Modul anzupassen. Beachten Sie, dass solche Änderungen Ihren Server für XSS-Angriffe anfällig machen könnten.