---
product: "AG Studio"
title: "Exporting"
description: "Studio reports can be exported for viewing outside of the browser."
framework: vue
version: "3.0.0"
related:
    - title: "Modes & Layout"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/modes-layout/"
    - title: "Theming"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/theming/"
    - title: "Theme Builder"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/theme-builder/"
    - title: "Localisation"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/localisation/"
    - title: "State"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/state/"
    - title: "Undo & Redo"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/undo-redo/"
    - title: "Figma Design System"
      url: "https://www.ag-grid.com/studio/archive/3.0.0/vue/figma-design-system/"
llms: "https://www.ag-grid.com/studio/archive/3.0.0/llms.txt"
---

# 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

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
  enableStudioDevValidations,
} from "ag-studio";

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <div class="example-controls">
        <div class="controls-row">
          <button v-on:click="printPage()">Print</button>
        </div>
      </div>
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<AgReportState>({
      pages: [
        {
          id: "a",
          widgets: {
            "1": {
              type: "grid",
              dataMapping: {
                cols: [
                  {
                    id: "medals.country",
                  },
                  {
                    id: "medals.gold",
                    aggregation: "sum",
                  },
                  {
                    id: "medals.silver",
                    aggregation: "sum",
                  },
                  {
                    id: "medals.bronze",
                    aggregation: "sum",
                  },
                ],
              },
            },
            "2": {
              type: "line-chart",
              dataMapping: {
                categoryKey: [
                  {
                    id: "medals.age",
                  },
                ],
                valueKey: [
                  {
                    id: "medals.total",
                    aggregation: "sum",
                  },
                ],
                tooltipKey: [],
              },
              format: {
                title: {
                  enabled: true,
                  text: "Medals vs. Age",
                },
              },
            },
            "3": {
              type: "value",
              dataMapping: {
                value: [
                  {
                    id: "medals.gold",
                    aggregation: "sum",
                  },
                ],
              },
              format: {
                title: {
                  enabled: true,
                  text: "Gold",
                },
              },
            },
            "4": {
              type: "value",
              dataMapping: {
                value: [
                  {
                    id: "medals.silver",
                    aggregation: "sum",
                  },
                ],
              },
              format: {
                title: {
                  enabled: true,
                  text: "Silver",
                },
              },
            },
            "5": {
              type: "value",
              dataMapping: {
                value: [
                  {
                    id: "medals.bronze",
                    aggregation: "sum",
                  },
                ],
              },
              format: {
                title: {
                  enabled: true,
                  text: "Bronze",
                },
              },
            },
            "6": {
              type: "value",
              dataMapping: {
                value: [
                  {
                    id: "medals.total",
                    aggregation: "sum",
                  },
                ],
              },
              format: {
                title: {
                  enabled: true,
                  text: "Total",
                },
              },
            },
          },
          widgetLayout: {
            "1": {
              xTrack: 0,
              yTrack: 0,
              xSpan: 10,
              ySpan: 37,
            },
            "2": {
              xTrack: 10,
              yTrack: 0,
              xSpan: 14,
              ySpan: 20,
            },
            "3": {
              xTrack: 10,
              yTrack: 20,
              xSpan: 7,
              ySpan: 9,
            },
            "4": {
              xTrack: 10,
              yTrack: 29,
              xSpan: 7,
              ySpan: 8,
            },
            "5": {
              xTrack: 17,
              yTrack: 20,
              xSpan: 7,
              ySpan: 9,
            },
            "6": {
              xTrack: 17,
              yTrack: 29,
              xSpan: 7,
              ySpan: 8,
            },
          },
          layout: {
            minWidth: 1123,
            maxWidth: 1123,
            height: 794,
            pagePadding: 96,
            widgetBorderEnabled: true,
          },
        },
      ],
      selectedPageId: "a",
      panels: {
        filters: {
          collapsed: true,
        },
        edit: {
          collapsed: true,
        },
        data: {
          collapsed: true,
        },
      },
    });
    const mode = ref<AgStudioMode>("edit");
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    function printPage() {
      print();
    }
    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const toStudioData = (data) => ({ sources: [{ id: "medals", data }] });

      fetch("https://www.ag-grid.com/studio/archive/3.0.0/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = toStudioData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      data,
      onApiReady,
      printPage,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

```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. You should set the [Colour Mode](https://www.ag-grid.com/studio/archive/3.0.0/vue/theming/#colours-and-dark-mode) to an appropriate value for the background chosen.