---
title: "Download"
framework: vue
version: "14.1.0"
---

# Download

Saving chart images by API call.

## Download API

We expose the APIs for triggering download via the `AgCharts` class:

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| download | Function |  | Starts a browser-based image download for the given `AgChartInstance`.  Returns a `Promise` that resolves once the download has been initiated. |
| getImageDataURL | Function |  | Returns a base64-encoded image data URL for the given `AgChartInstance`. |

The `AgChartInstance` can be obtained using the Vue `$refs` component property to reference our `AgCharts` tag, which exposes a `chart` property.

This example demonstrates:

- How to obtain a reference to an `AgChartInstance`.
- How to use `AgChartInstance.download()` to start a chart image download.
- How to use `AgChartInstance.getImageDataURL()` to create a base64-encoded image URL, and then open it in a new tab.

#### Download via AgChartInstance API

```ts
import { createApp, defineComponent, ref } from "vue";
import { AgCharts } from "ag-charts-vue3";
import type { AgChartOptions } from "ag-charts-types";
import {
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
} from "ag-charts-community";
import { getData } from "./data";
import clone from "clone";

function buildSeries(name) {
  return {
    type: "area",
    xKey: "year",
    yKey: name.toLowerCase(),
    yName: name,
    fillOpacity: 0.5,
  };
}

ModuleRegistry.registerModules([
  AreaSeriesModule,
  CategoryAxisModule,
  LegendModule,
  NumberAxisModule,
]);

const ChartExample = defineComponent({
  template: `
    <div class="example-controls">
      <div class="controls-row">
        <button v-on:click="download()">Download</button>
        <button v-on:click="downloadFixedSize()">Download at 600x300</button>
        <button v-on:click="openImage()">Open</button>
      </div>
    </div>
    <ag-charts
      ref="agCharts"
      :options="options"
    />
  `,
  components: {
    "ag-charts": AgCharts,
  },
  setup(props) {
    const options = ref<AgChartOptions>({
      title: {
        text: "Browser Usage Statistics",
      },
      subtitle: {
        text: "2009-2019",
      },
      data: getData(),
      series: [
        buildSeries("IE"),
        buildSeries("Chrome"),
        buildSeries("Firefox"),
        buildSeries("Safari"),
      ],
      legend: { position: "top" },
    });
    const agCharts = ref(null);

    const download = () => {
      agCharts.value.chart.download();
    };
    const downloadFixedSize = () => {
      agCharts.value.chart.download({ width: 600, height: 300 });
    };
    const openImage = () => {
      agCharts.value.chart
        .getImageDataURL({ width: 600, height: 300 })
        .then((imageDataURL) => {
          const image = new Image();
          image.src = imageDataURL;
          const tab = window.open(imageDataURL);
          if (tab) {
            tab.document.write(image.outerHTML);
            tab.document.close();
          }
        });
    };

    return {
      options,
      agCharts,
      download,
      downloadFixedSize,
      openImage,
    };
  },
});

createApp(ChartExample).mount("#app");
```

[Live example: Download via AgChartInstance API](https://www.ag-grid.com/charts/vue3/api-download/examples/download)