---
title: "Excel Export - Page Setup"
enterprise: true
framework: angular
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/angular-data-grid/excel-export-api/#excelexportparams). These settings are visible when printing the exported Excel file or exporting to PDF.

```ts
<ag-grid-angular
    [defaultExcelExportParams]="defaultExcelExportParams"
    /* other grid options ... */ />

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 { HttpClient } from "@angular/common/http";
import { Component } from "@angular/core";

import { AgGridAngular } from "ag-grid-angular";
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 type { IOlympicData } from "./interfaces";
import "./styles.css";

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

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

@Component({
  standalone: true,
  imports: [AgGridAngular],
  selector: "my-app",
  template: `<div class="container">
    <form (submit)="onFormSubmit($event)">
      <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-angular
        style="width: 100%; height: 100%;"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        [popupParent]="popupParent"
        [rowData]="rowData"
        (gridReady)="onGridReady($event)"
      />
    </div>
  </div>`,
})
export class AppComponent {
  public columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "country", minWidth: 200 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];

  public defaultColDef: ColDef = {
    filter: true,
    minWidth: 100,
    flex: 1,
  };

  public popupParent: HTMLElement | null = document.body;
  public rowData!: IOlympicData[];
  private gridApi!: GridApi;

  constructor(private http: HttpClient) {}
  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.gridApi = params.api;
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) =>
        params.api!.setGridOption(
          "rowData",
          data.filter((rec: any) => rec.country != null),
        ),
      );
  }

  onFormSubmit(e: any) {
    e.preventDefault();
    const { pageSetup, margins } = getSheetConfig();
    this.gridApi.exportDataAsExcel({ pageSetup, margins });
  }
}

function getNumber(id: string) {
  const el = document.querySelector(id) as any;
  if (!el || isNaN(el.value)) {
    return 0;
  }
  return parseFloat(el.value);
}

function getValue(id: string) {
  return (document.querySelector(id) as any).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"),
    },
  };
}
```

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

## 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. |