Export nach PDF und PNG

dhtmlxGantt bietet einen Online-Export-Service, mit dem Sie Ihr Gantt-Diagramm als PDF oder PNG speichern können.

Es gibt mehrere Export-Services, die Sie auf Ihrem eigenen Computer einrichten können, um Gantt-Diagramme lokal als PDF oder PNG zu exportieren. Beachten Sie, dass Export-Services nicht im Gantt-Paket enthalten sind – Details zu den Nutzungsbedingungen der einzelnen Services finden Sie im zugehörigen Artikel.

Zeitlimits

Wenn der Export länger als 20 Sekunden dauert, wird der Vorgang abgebrochen und Sie sehen diesen Fehler:

Error: Timeout trigger 20 seconds

Wenn mehrere Benutzer gleichzeitig Gantt-Diagramme exportieren, kann der Prozess länger dauern, aber die Zeit wird für jede Benutzeranfrage separat gezählt.

Begrenzungen der Anfragegröße

Der allgemeine API-Endpunkt https://export.dhtmlx.com/gantt verarbeitet alle Exportmethoden (exportToPDF, exportToPNG, exportToMSProject, usw.). Die maximale Anfragegröße beträgt hier 10 MB.

Es gibt außerdem einen speziellen API-Endpunkt https://export.dhtmlx.com/gantt/project für MSProject und Primavera P6 Export-/Import-Services (exportToMSProject / importFromMSProject / exportToPrimaveraP6 / importFromPrimaveraP6 nur). Dieser Endpunkt unterstützt Anfragen bis zu 40 MB.

Hier finden Sie weitere Details zur Verwendung des Exportmoduls für PDF.

Um Ihr Gantt-Diagramm als PDF zu exportieren, gehen Sie wie folgt vor:

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

• Rufen Sie dann die exportToPDF-Methode auf, 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 exportieren, gehen Sie wie folgt vor:

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

• Rufen Sie dann die exportToPNG-Methode auf, 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 verschiedenen optionalen Eigenschaften:

Beispiel für den Aufruf der 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 einen eigenen Dateinamen für die exportierte Datei anzugeben, verwenden Sie die name-Eigenschaft in den Parametern für exportToPDF/exportToPNG:

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

Standardmäßig verwendet das exportierte Gantt-Diagramm dieselbe Sprache wie auf der Seite angezeigt.

Um in einer anderen Sprache zu exportieren, setzen Sie die locale-Eigenschaft in den Parametern für exportToPDF/exportToPNG:

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

Es gibt zwei Möglichkeiten, festzulegen, welche Aufgaben im exportierten PDF oder PNG erscheinen:

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

Festlegen des Datumsbereichs der zu exportierenden Aufgaben

Um den Bereich der Aufgaben für den Export festzulegen, verwenden Sie die Eigenschaften start und end in den Parametern für exportToPDF/exportToPNG:

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

Festlegen einer eigenen Datenquelle für den Export

Wenn Sie das Gantt-Diagramm mit einem anderen Datensatz exportieren möchten als dem, der ursprünglich angezeigt wird, können Sie die data-Eigenschaft in den Parametern der exportToPDF/exportToPNG-Methoden verwenden:

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 übernimmt das exportierte Gantt-Diagramm dasselbe Skin wie die Seite.

Um ein anderes Skin in der exportierten PNG- oder PDF-Datei zu verwenden, nutzen Sie die skin-Eigenschaft in den Parametern der exportToPDF/exportToPNG-Methoden:

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

Hier finden Sie die vollständige Liste verfügbarer Gantt-Skins.

Sie können eine Kopf- oder Fußzeile zur exportierten PNG- oder PDF-Datei hinzufügen, indem Sie die Eigenschaften header und footer in den Parametern der Methoden exportToPDF/exportToPNG verwenden:

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

Um das Aussehen des exportierten Gantt-Diagramms anzupassen, können Sie ein Stylesheet mit Ihren CSS-Klassen auf zwei Arten bereitstellen:

• Durch Verlinken eines externen Stylesheets:

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

• Oder durch das direkte Einbetten von Styles mittels des 'style'-Tags:

gantt.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... custom css classes here ...</style>' });

Beachten Sie, dass dieser Ansatz mit HTTP-Referenzen funktioniert, die global zugänglich sind. Falls Ihre CSS-Dateien im Intranet oder lokal gehostet werden, können Sie die Stile direkt wie folgt einbetten:

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

Alle Stile für die Exportfunktion sammeln

Manchmal sind Stile auf mehrere Dateien verteilt, die nicht öffentlich zugänglich sind, was es umständlich macht, jede einzeln einzubinden. Sie können alle auf der Seite verwendeten Stile sammeln und in den Export-Header einfügen.

Alle Stile sind im Objekt document.styleSheets verfügbar. Wenn die Stile aus derselben Domain stammen, können Sie deren CSS-Regeln sammeln und in den header einfügen. Hier 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:   Export Gantt with custom icons to PDF

Related sample:   Export Gantt with resource load diagram to PDF with no need to specify styles

Standardmäßig wird das Gantt-Diagramm basierend auf der bereitgestellten Konfiguration und den geladenen Daten exportiert, aber benutzerdefinierte Elemente und einige Templates sind nicht enthalten.

Um das gesamte Gantt-Markup so zu exportieren, wie es angezeigt wird, einschließlich aller benutzerdefinierten Elemente, setzen Sie die Eigenschaft raw:true 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.

Außerdem erhöht sich durch diesen Modus die Größe der API-Anfrage. Große Diagramme können das 10MB-Limit des Online-Exportdienstes überschreiten und den Export fehlschlagen lassen. In solchen Fällen muss ein Exportdienst lokal installiert und die Anfragegröße entsprechend angepasst werden.
Siehe Systemanforderungen für die lokale Einrichtung von Exportdiensten.

Beim Export des Gantt-Diagramms nach PNG oder PDF beachten Sie bitte, dass der Export von HTML-Elementen aufgrund von Sicherheitsbedenken Einschränkungen unterliegt.

Bestimmte HTML-Elemente wie <canvas>, <svg>, <script> und Bilder mit Base64-Daten im src-Attribut sind eingeschränkt. Es gibt jedoch sichere Möglichkeiten, Bilder im SVG- und Base64-Format zu exportieren:

• Verwenden Sie ein <img>-Element mit dem src-Attribut, das auf eine URL eines SVG-Bildes verweist (funktioniert beim Export nach PNG und JPG, aber nicht bei Base64), zum Beispiel:

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

• Verwenden Sie CSS-Stile wie background oder background-image mit einem url-Wert, der auf eine Bild-URL oder Base64-Daten verweist (funktioniert beim Export nach PNG, JPG und SVG):

.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:  Exporting safe and insecure HTML elements to PDF

Wenn Sie das Exportmodul besitzen und HTML-Elemente exportieren müssen, die vom Online-Exportserver nicht unterstützt werden, können Sie den Support kontaktieren, um Anleitungen zur Anpassung Ihres Moduls zu erhalten, um diese Einschränkungen aufzuheben. Beachten Sie jedoch, dass dadurch Ihr Server für XSS-Schwachstellen anfällig werden kann.