Excel Export allows you to configure the page settings for the exported Excel file.
Page Setup Copy Link
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. These settings are visible when printing the exported Excel file or exporting to PDF.
const gridOptions = {
defaultExcelExportParams: {
pageSetup: {
orientation: 'Landscape',
pageSize: 'A3'
},
margins: {
top: 1,
right: 1,
bottom: 1,
left: 1,
header: 0.5,
footer: 0.5,
}
},
// other grid options ...
}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
pageSetupobject. - Margin values are stored in the
marginsobject.
import {
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
NumberFilterModule,
TextFilterModule,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
ExcelExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
let gridApi: GridApi<IOlympicData>;
const gridOptions: GridOptions<IOlympicData> = {
columnDefs: [
{ field: "athlete", minWidth: 200 },
{ field: "country", minWidth: 200 },
{ field: "sport", minWidth: 150 },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
],
defaultColDef: {
filter: true,
minWidth: 100,
flex: 1,
},
popupParent: document.body,
};
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"),
},
};
}
function onFormSubmit(e: any) {
e.preventDefault();
const { pageSetup, margins } = getSheetConfig();
gridApi!.exportDataAsExcel({ pageSetup, margins });
}
const gridDiv = document.querySelector<HTMLElement>("#myGrid");
const form = document.querySelector<HTMLFormElement>("form");
form?.addEventListener("submit", (e) => onFormSubmit(e));
if (gridDiv) {
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
.then((response) => response.json())
.then((data) =>
gridApi!.setGridOption(
"rowData",
data.filter((rec: any) => rec.country != null),
),
);
}
.details > label {
margin-bottom: 10px;
}
.details > label:first-of-type {
margin-top: 10px;
}
.details > label:last-of-type {
margin-bottom: 0;
}
.option {
display: block;
margin: 5px 10px 5px 0;
}
.grid-wrapper {
display: flex;
flex: 1 1 0px;
}
.margin-container {
position: relative;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
width: 360px;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.column.margin-container label {
width: 115px;
white-space: nowrap;
display: flex;
overflow: hidden;
align-items: center;
justify-content: space-between;
}
.column.margin-container input {
max-width: 40px;
margin: 2px;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.columns {
display: flex;
flex-direction: row;
gap: 16px;
}
<div class="container">
<form>
<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">
<div id="myGrid"></div>
</div>
</div>
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
} Interfaces Copy Link
ExcelExportParams Copy Link
interface ExcelExportParams {
// ...
margins?: ExcelSheetMargin;
pageSetup?: ExcelSheetPageSetup
} ExcelSheetMargin Copy Link
Properties available on the ExcelSheetMargin interface.
The sheet top margin. |
The sheet right margin. |
The sheet bottom margin. |
The sheet left margin. |
The sheet header margin. |
The sheet footer margin. |
ExcelSheetPageSetup Copy Link
Properties available on the ExcelSheetPageSetup interface.
Use this property to change the print orientation. |
Use this property to set the sheet size. |