DayPilot.Gantt.exportAs

The exportAs() method exports the Gantt Chart in the specified image format or as an Excel spreadsheet.

Declaration

DayPilot.Gantt.exportAs(format[, options]);

Parameters

• format ("svg" | "png" | "jpeg" | "xlsx") - output image format

• options.area ("viewport" | "full" | "range") - exported area; defaults to "viewport"

• options.dateFrom - start date (applies only to area: "range")

• options.dateTo - end date (applies only to area: "range")

• options.resourceFrom - start task (vertically, applies only to area: "range")

• options.resourceTo - end task (vertically, applies only to area: "range")

• options.quality - quality of the output JPEG image (applies only to format: "jpeg"); defaults to 0.92

• options.scale - output scale factor; defaults to 1 (use 2 for 200% size)

Return Value

Returns a DayPilot.Export object that provides the following methods:

• toElement() - returns a DOM element with the image (<svg> or <img>)

• toHtml() - returns the image element as HTML

• toDataUri() - returns a data URI string (SVG or image data)

• toBlob() - returns a Blob object

• download(filename) - forces download of the image

• print() - prints the exported image using the browser print dialog

JavaScript

const image = gantt.exportAs("png", {
  area: "viewport",
  scale: 2
});

image.download("gantt.png");

Angular

Use a template reference and ViewChild in an existing component. Invoke exportImage() from a button after initialization.

<daypilot-gantt [config]="config" #gantt></daypilot-gantt>

@ViewChild("gantt") gantt!: DayPilotGanttComponent;
config: DayPilot.GanttConfig = {};

exportImage() {
  this.gantt.control.exportAs("png", {area: "full", scale: 2}).download("gantt.png");
}

React

const gantt = useRef(null);
function exportImage() {
  gantt.current.exportAs("png", {area: "full", scale: 2}).download("gantt.png");
}

<DayPilotGantt
  controlRef={control => { gantt.current = control; }}
/>

Vue

<script setup>
import {ref} from "vue";
const gantt = ref(null);
function exportImage() {
  gantt.value.control.exportAs("png", {area: "full", scale: 2}).download("gantt.png");
}
</script>

<template>
  <DayPilotGantt ref="gantt" />
</template>

Keep the component’s existing date, data and layout options. Angular imports ViewChild and the DayPilot component type; React imports useRef. Vue uses the DayPilot component already registered or imported by the application.

Bitmap Export Errors

PNG and JPEG export can throw an error with name: "DayPilot.ExportError" and code: "BITMAP_EXPORT_FAILED" if the bitmap cannot be created or encoded. This is a structured error object, not a public constructor.

• stage: "dimensions", "allocation", "drawing" or "encoding"

• format: output MIME type

• width, height, scale: requested logical dimensions and scale

• pixelWidth, pixelHeight: requested bitmap dimensions

• surface: "main" or "group"; surfaceWidth and surfaceHeight: dimensions of the failed surface

• cause: optional underlying error

Native canvas SecurityError exceptions keep their original identity. Image and font loading must be handled separately. The exporter does not automatically reduce scale or paginate a large image; choose a smaller area or scale when appropriate.

See Also

Client-Side Image Export [doc.daypilot.org]

DayPilot.Gantt Class