---
title: "Exporting"
framework: react
version: "2.1.1"
---

# Exporting

Studio reports can be exported for viewing outside of the browser.

## Print Layout

Printing physical copies or exporting to PDF are achieved using the browser's print dialogue. Only the content will be exported, and the remaining UI will be hidden.

For best results, configure the page's `layout` to match your target paper size and margins. The layout is measured in pixels, and a conversion factor of 96 pixels per inch is used.

The example below targets landscape A4 (297 × 210mm, or 1123 × 794px). Setting `minWidth` and `maxWidth` to the same value fixes the page width, `height` fixes the page height, and `pagePadding` insets the content by 1 inch.

#### Print Layout

```tsx
"use client";

import type {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioApiReadyEvent,
  AgStudioMode,
} from "ag-studio";
import type { AgStudioRef } from "ag-studio-react";
import { AgStudio } from "ag-studio-react";
import React, {
  StrictMode,
  useCallback,
  useMemo,
  useRef,
  useState,
} from "react";
import { createRoot } from "react-dom/client";

const StudioExample = () => {
  const studioRef = useRef<AgStudioRef>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
  const mode = useMemo<AgStudioMode>(() => "print", []);
  const initialState = useMemo<AgReportState>(() => {
    return {
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "2": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
                tooltipKey: [],
              },
            },
            "3": {
              type: "pie-chart",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [{ id: "medals.gold", aggregation: "sum" }],
                tooltipKey: [],
              },
            },
            "4": {
              type: "column-chart-grouped",
              dataMapping: {
                categoryKey: [{ id: "medals.country" }],
                valueKey: [{ id: "medals.total", aggregation: "sum" }],
                tooltipKey: [],
              },
            },
            "5": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.country" },
                  { id: "medals.total", aggregation: "sum" },
                ],
              },
            },
            "6": {
              type: "grid",
              dataMapping: {
                cols: [
                  { id: "medals.sport" },
                  { id: "medals.gold", aggregation: "sum" },
                  { id: "medals.silver", aggregation: "sum" },
                  { id: "medals.bronze", aggregation: "sum" },
                ],
              },
            },
          },
          widgetLayout: {
            "1": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 20 },
            "2": { xTrack: 0, yTrack: 22, xSpan: 24, ySpan: 20 },
            "3": { xTrack: 0, yTrack: 44, xSpan: 12, ySpan: 20 },
            "4": { xTrack: 12, yTrack: 44, xSpan: 12, ySpan: 20 },
            "5": { xTrack: 0, yTrack: 66, xSpan: 24, ySpan: 20 },
            "6": { xTrack: 0, yTrack: 88, xSpan: 24, ySpan: 20 },
          },
        },
      ],
      selectedPageId: "a",
    };
  }, []);

  const onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
    fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: any[]) => setData({ sources: [{ id: "medals", data }] }));
  }, []);

  return (
    <div style={containerStyle}>
      <AgStudio
        ref={studioRef}
        style={studioStyle}
        className="my-studio-container"
        data={data}
        initialState={initialState}
        mode={mode}
        onApiReady={onApiReady}
      />
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);
```

[Live example: Print Layout](https://www.ag-grid.com/studio/examples/exporting/print-layout/reactFunctionalTs/)

```js
const pageState = {
    layout: {
        minWidth: 1123,
        maxWidth: 1123,
        height: 794,
        pagePadding: 96,
    },
}
```

To preconfigure the browser's print dialogue, copy the page size and margins into a `@page` rule in your CSS:

```css
@page {
    size: A4 landscape;
    margin: 96px;
}
```

> **Note**
>
> The canvas' background is not exported for print. To export a background, set a `background-color` on the `:root` element.