---
product: "AG Studio"
title: "Exporting and Printing"
description: "Export a Widget's data to CSV, download a chart as a PNG image, or print an AG Studio report, in both Edit and View mode."
framework: react
version: "3.1.0"
related:
    - title: "Widget Basics"
      url: "https://www.ag-grid.com/studio/analysts/widget-basics/"
    - title: "Building Widgets"
      url: "https://www.ag-grid.com/studio/analysts/building-widgets/"
    - title: "Page Layout"
      url: "https://www.ag-grid.com/studio/analysts/page-layout/"
    - title: "AI Assistant"
      url: "https://www.ag-grid.com/studio/analysts/ai-assistant/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Exporting and Printing

You can export a Widget's data to a CSV file, download a chart as an image, or print a whole report.

Exporting and downloading work in both Edit Mode and View Mode. See [Modes](https://www.ag-grid.com/studio/analysts/user-interface/#modes).

## CSV Export

Table, Pivot Table and chart Widgets can export their data as a CSV file. To export a Widget:

1. Select the Widget to show its [Widget Toolbar](https://www.ag-grid.com/studio/analysts/widget-basics/#widget-toolbar).
2. Select the **CSV** button.

Try it in the example below: select **Sales by Product** or **Revenue by Category**, then select **CSV**.

#### Export

```ts
import {
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
  enableStudioDevValidations,
} from "ag-studio";
import { getData } from "./data.ts";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableStudioDevValidations();
}

const initialState: AgReportState = {
  pages: [
    {
      id: "page1",
      widgets: {
        grid: {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "sales.product" },
              { id: "sales.category" },
              { id: "sales.units", aggregation: "sum" },
              { id: "sales.revenue", aggregation: "sum" },
            ],
          },
          format: {
            title: {
              enabled: true,
              text: "Sales by Product",
            },
          },
        },
        chart: {
          type: "column-chart-grouped",
          dataMapping: {
            categoryKey: [{ id: "sales.category" }],
            valueKey: [{ id: "sales.revenue", aggregation: "sum" }],
            tooltipKey: [],
          },
          format: {
            title: {
              enabled: true,
              text: "Revenue by Category",
            },
          },
        },
      },
      widgetLayout: {
        grid: { xTrack: 0, yTrack: 0, xSpan: 14, ySpan: 26 },
        chart: { xTrack: 14, yTrack: 0, xSpan: 10, ySpan: 26 },
      },
    },
  ],
  selectedPageId: "page1",
  panels: {
    filters: {
      collapsed: true,
    },
    data: {
      collapsed: true,
    },
    edit: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
  data: getData(),
};

let studioApi: AgStudioApi;

// setup Studio after the page has finished loading
const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
```

[Live example: Export](https://www.ag-grid.com/studio/examples/exporting-and-printing/export-report/typescript/)

The file is named after the Widget title, and its values are formatted just as they appear in the Widget. See [Formatting Values](https://www.ag-grid.com/studio/analysts/formatting-values/).

By default, an export includes up to 1,000 rows. If the Widget has more, only the first 1,000 are exported. Your developer can change or remove this limit.

## Chart Image Download

Chart Widgets also have a **Download** button in their Widget Toolbar, which saves the chart as a PNG image named `image`. The image is always 600 by 300 pixels, however large the Widget is on the page, and it includes the chart's title, subtitle and caption if they are shown.

To try it, select **Revenue by Category** in the example above, then select **Download**.

## Printing

To print a report, use your browser's print command. To save it as a PDF instead, choose the save-as-PDF option in the print dialogue.

Only the report itself is printed. AG Studio leaves out its panels, the Widget Toolbar and the page background colour.

Your developer can set the page size to match a paper size, such as landscape A4, so the report fits neatly on the printed page.