---
title: "Excel Export - Page Setup"
enterprise: true
framework: vue
version: "36.1.0"
---

# Excel Export - Page Setup

Excel Export allows you to configure the page settings for the exported Excel file.

## Page Setup

You can customise the Excel export page settings such as **page size**, **orientation**, and **margin**, using the `pageSetup` and `margins` configs of the [Excel Export Params](https://www.ag-grid.com/vue-data-grid/excel-export-api/#excelexportparams). These settings are visible when printing the exported Excel file or exporting to PDF.

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    pageSetup: {
        orientation: 'Landscape',
        pageSize: 'A3'
    },
    margins: {
        top: 1,
        right: 1,
        bottom: 1,
        left: 1,
        header: 0.5,
        footer: 0.5,
    }
};
```

> **Warning**
>
> The value of the margins must be provided in `inches`.

Note the following:

- The sample below allow you to configure the page size, orientation and margin values.
- Page size and orientation are stored in the `pageSetup` object.
- Margin values are stored in the `margins` object.

#### Excel Export - Page Setup

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";

import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

import "./styles.css";

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

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
            <div class="container">
                <form @submit="this.onFormSubmit">
                    <div class="columns">
                        <div class="column">
                            <label class="option" for="pageOrientation">
                                Page Orientation =
                                <select id="pageOrientation">
                                    <option value="Portrait">Portrait</option>
                                    <option value="Landscape">Landscape</option>
                                </select>
                            </label>
                            <label class="option" for="pageSize">
                                Page Size =
                                <select id="pageSize">
                                    <option value="Letter">Letter</option>
                                    <option value="Letter Small">Letter Small</option>
                                    <option value="Tabloid">Tabloid</option>
                                    <option value="Ledger">Ledger</option>
                                    <option value="Legal">Legal</option>
                                    <option value="Statement">Statement</option>
                                    <option value="Executive">Executive</option>
                                    <option value="A3">A3</option>
                                    <option value="A4">A4</option>
                                    <option value="A4 Small">A4 Small</option>
                                    <option value="A5">A5</option>
                                    <option value="A6">A6</option>
                                    <option value="B4">B4</option>
                                    <option value="B5">B5</option>
                                    <option value="Folio">Folio</option>
                                    <option value="Envelope">Envelope</option>
                                    <option value="Envelope DL">Envelope DL</option>
                                    <option value="Envelope C5">Envelope C5</option>
                                    <option value="Envelope B5">Envelope B5</option>
                                    <option value="Envelope C3">Envelope C3</option>
                                    <option value="Envelope C4">Envelope C4</option>
                                    <option value="Envelope C6">Envelope C6</option>
                                    <option value="Envelope Monarch">Envelope Monarch</option>
                                    <option value="Japanese Postcard">Japanese Postcard</option>
                                    <option value="Japanese Double Postcard">Japanese Double Postcard</option>
                                </select>
                            </label>
                        </div>
                        <fieldset class="column margin-container">
                            <legend>Margins</legend>
                            <label for="top">Top = <input type="number" id="top" value="0.75" min="0" step="0.05"></label>
                            <label for="right">Right = <input type="number" id="right" value="0.7" min="0" step="0.05"></label>
                            <label for="bottom">Bottom = <input type="number" id="bottom" value="0.75" min="0" step="0.05"></label>
                            <label for="left">Left = <input type="number" id="left" value="0.7" min="0" step="0.05"></label>
                            <label for="header">Header = <input type="number" id="header" value="0.3" min="0" step="0.05"></label>
                            <label for="footer">Footer = <input type="number" id="footer" value="0.3" min="0" step="0.05"></label>
                        </fieldset>
                    </div>
                    <div>
                        <input type="submit" style="margin: 5px 0px; font-weight: bold;" value="Export to Excel">
                    </div>
                </form>
                <div class="grid-wrapper">
                    <ag-grid-vue
                
                style="width: 100%; height: 100%;"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                :defaultColDef="defaultColDef"
                :popupParent="popupParent"
                :rowData="rowData"></ag-grid-vue>
                </div>
            </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const columnDefs = ref([
      {
        field: "athlete",
        minWidth: 200,
      },
      {
        field: "country",
        minWidth: 200,
      },
      {
        field: "sport",
        minWidth: 150,
      },
      {
        field: "gold",
      },
      {
        field: "silver",
      },
      {
        field: "bronze",
      },
      {
        field: "total",
      },
    ]);

    const gridApi = shallowRef<GridApi | null>(null);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });

    const popupParent = ref(null);
    const rowData = ref<any[]>(null);

    onBeforeMount(() => {
      popupParent.value = document.body;
    });

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) =>
        params.api.setGridOption(
          "rowData",
          data.filter((rec) => rec.country != null),
        );

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    const onFormSubmit = (e) => {
      e.preventDefault();
      const { pageSetup, margins } = getSheetConfig();
      gridApi.value.exportDataAsExcel({ pageSetup, margins });
    };

    return {
      columnDefs,
      gridApi,
      defaultColDef,
      popupParent,
      rowData,
      onGridReady,
      onFormSubmit,
    };
  },
});

function getNumber(id) {
  var el = document.querySelector(id);
  if (!el || isNaN(el.value)) {
    return 0;
  }
  return parseFloat(el.value);
}

function getValue(id) {
  return document.querySelector(id).value;
}

function getSheetConfig() {
  return {
    pageSetup: {
      orientation: getValue("#pageOrientation"),
      pageSize: getValue("#pageSize"),
    },
    margins: {
      top: getNumber("#top"),
      right: getNumber("#right"),
      bottom: getNumber("#bottom"),
      left: getNumber("#left"),
      header: getNumber("#header"),
      footer: getNumber("#footer"),
    },
  };
}

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

[Live example: Excel Export - Page Setup](https://www.ag-grid.com/examples/excel-export-page-setup/excel-export-page-setup/vue3)

## Interfaces

### ExcelExportParams

```ts
interface ExcelExportParams {
    // ...
    margins?: ExcelSheetMargin;
    pageSetup?: ExcelSheetPageSetup
}
```

### ExcelSheetMargin

Properties available on the `ExcelSheetMargin` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `top` | `number` |  | `0.75` | The sheet top margin. |
| `right` | `number` |  | `0.7` | The sheet right margin. |
| `bottom` | `number` |  | `0.75` | The sheet bottom margin. |
| `left` | `number` |  | `0.7` | The sheet left margin. |
| `header` | `number` |  | `0.3` | The sheet header margin. |
| `footer` | `number` |  | `0.3` | The sheet footer margin. |

### ExcelSheetPageSetup

Properties available on the `ExcelSheetPageSetup` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `'Portrait' \| 'Landscape'` |  | `'Portrait'` | Use this property to change the print orientation. |
| `pageSize` | `\| 'Letter'         \| 'Letter Small'         \| 'Tabloid'         \| 'Ledger'         \| 'Legal'         \| 'Statement'         \| 'Executive'         \| 'A3'         \| 'A4'         \| 'A4 Small'         \| 'A5'         \| 'A6'         \| 'B4'         \| 'B5'         \| 'Folio'         \| 'Envelope'         \| 'Envelope DL'         \| 'Envelope C5'         \| 'Envelope B5'         \| 'Envelope C3'         \| 'Envelope C4'         \| 'Envelope C6'         \| 'Envelope Monarch'         \| 'Japanese Postcard'         \| 'Japanese Double Postcard'` |  | `'Letter'` | Use this property to set the sheet size. |