Export nach PNG

Ab Version 4.1 bietet dhtmlxScheduler einen Online-Exportdienst an, mit dem Sie den Scheduler als PNG-Bild exportieren können.

Es stehen verschiedene Exportdienste zur Verfügung. Sie können diese lokal auf Ihrem Rechner installieren, um den Scheduler ohne Nutzung des Online-Dienstes als PNG zu exportieren.

Beachten Sie, dass Exportdienste nicht im Scheduler-Paket enthalten sind. Details zu den Nutzungsbedingungen der einzelnen Dienste finden Sie im zugehörigen Artikel.

Alle Exportmethoden (exportToPDF, exportToPNG, usw.) verwenden den gemeinsamen API-Endpunkt https://export.dhtmlx.com/scheduler. Die maximal zulässige Anfragegröße beträgt 10 MB.

Um den Scheduler als PNG-Bild zu exportieren, gehen Sie wie folgt vor:

• Aktivieren Sie das export_api-Plugin mit der Methode plugins:

scheduler.plugins({
    export_api: true
});

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

• Verwenden Sie die exportToPNG-Methode, um den Export auszulösen:

<input value="Export to PNG" type="button" onclick='scheduler.exportToPNG()'>

Related sample:  Export to PDF/PNG

Die Methode exportToPNG() akzeptiert ein Objekt mit mehreren optionalen Eigenschaften:

Beispiel für den Aufruf der Exportmethode mit optionalen Eigenschaften

scheduler.exportToPNG({
    format:"A4",
    orientation:"portrait",
    zoom:1,
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    server:"https://myapp.com/myexport/scheduler"
});

Sie können einen eigenen Dateinamen für das exportierte PNG mit der name-Eigenschaft in der exportToPNG-Methode festlegen:

scheduler.exportToPNG({
    name:"my_beautiful_scheduler.png"});

Um einen Header oder Footer im PNG auszugeben, verwenden Sie die Eigenschaften header und footer in der exportToPNG-Methode:

scheduler.exportToPNG({
    name:"myscheduler.png",
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>"
});

Um eigene Styles für den exportierten Scheduler zu verwenden, fügen Sie Ihr CSS auf eine der folgenden Arten hinzu:

• Binden Sie ein Stylesheet per Link ein:

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

• Oder betten Sie Styles direkt mit einem 'style'-Tag ein:

scheduler.exportToPNG({
    name:"calendar.png",
    header:'<style>... custom css classes here ...</style>' });

Wenn Ihr CSS lokal oder im Intranet gehostet ist, können Sie alle Styles inline einbinden, z. B.:

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

Beim Export des Schedulers nach PNG ist zu beachten, dass der Export bestimmter HTML-Elemente aus Sicherheitsgründen eingeschränkt ist.

Elemente wie <canvas>, <svg>, <script> und Bilder mit Base64-src-Attributen werden nicht vollständig unterstützt. Es gibt jedoch sichere Möglichkeiten, Bilder im SVG- und Base64-Format einzubinden:

• Verwenden Sie ein <img>-Tag mit einem src-Attribut, das auf eine SVG-Bild-URL verweist (funktioniert für PNG- und JPG-Exporte, aber nicht für Base64), zum Beispiel:

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

• Verwenden Sie CSS-Styles wie background oder background-image mit einer url, die auf eine Bild-URL oder ein Base64-codiertes Bild verweist (funktioniert mit PNG/JPG/SVG-Exporten):

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

Wenn Sie ein eigenes Exportmodul haben und HTML-Elemente exportieren müssen, die vom Online-Exportserver nicht unterstützt werden, können Sie den Support kontaktieren, um Hinweise zu erhalten, wie Sie Ihr Modul anpassen können, um diese Einschränkungen zu entfernen. Beachten Sie jedoch, dass dies Ihren Server für XSS-Sicherheitslücken anfällig machen kann.