Configure the PDF page size, orientation, margins, and repeated table headers using the page and repeatHeader export options. Page dimensions and margins use points, where 72 points equal one inch.
Page Size And Orientation Copy Link
The default page is A4 landscape with a 36-point margin on every side. Use named A4 or Letter page sizes, or provide explicit dimensions. Custom dimensions are normalised to the requested orientation.
this.gridApi.exportDataAsPdf({
page: {
size: { width: 720, height: 540 },
orientation: 'landscape',
margin: { top: 36, right: 24, bottom: 36, left: 24 },
},
});For named sizes, changing orientation rotates the page dimensions. For custom sizes, the supplied dimensions are normalised so the wider side is used for landscape and the taller side is used for portrait.
Page Margins Copy Link
Set page.margin to one number for every side, or provide individual top, right, bottom, and left values.
this.gridApi.exportDataAsPdf({
page: {
margin: 24,
},
});Margins reduce the printable area available to the document title and table. Exported columns are scaled down proportionally when their combined widths exceed the available width.
Repeating Table Headers Copy Link
Table header rows repeat when body rows continue onto another page by default. Set repeatHeader=false to render them only on the first page.
A repeated table header is omitted when it cannot fit together with the next row or row fragment. See PDF Export - Extra Content to configure page headers and footers.
The example below lets you change the page size, orientation, margins, and repeated-header behaviour before exporting.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PdfExportParams,
PdfPageOrientation,
PdfPageSize,
enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, PdfExportModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ContextMenuModule,
PdfExportModule,
]);
interface InventoryData {
item: string;
category: string;
warehouse: string;
quantity: number;
status: string;
}
function getPageSize(): PdfPageSize {
const pageSize =
document.querySelector<HTMLSelectElement>("#pageSize")!.value;
if (pageSize === "Letter") {
return "Letter";
}
if (pageSize === "custom") {
return { width: 420, height: 300 };
}
return "A4";
}
function getPageOrientation(): PdfPageOrientation {
return document.querySelector<HTMLSelectElement>("#orientation")!.value ===
"portrait"
? "portrait"
: "landscape";
}
function getPageMargin(): number {
const margin = document.querySelector<HTMLSelectElement>("#margin")!.value;
if (margin === "compact") {
return 18;
}
if (margin === "wide") {
return 54;
}
return 36;
}
function getPdfExportParams(): PdfExportParams {
return {
documentTitle: "Quarterly Inventory",
page: {
size: getPageSize(),
orientation: getPageOrientation(),
margin: getPageMargin(),
},
repeatHeader:
document.querySelector<HTMLInputElement>("#repeatHeader")!.checked,
columnWidth: "auto",
};
}
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="example-wrapper">
<div class="controls" v-on:change="onPdfExportOptionsChanged()">
<button v-on:click="onBtExport()">Export to PDF</button>
<label for="pageSize">Page size</label>
<select id="pageSize">
<option value="A4">A4</option>
<option value="Letter">Letter</option>
<option value="custom">Custom small page</option>
</select>
<label for="orientation">Orientation</label>
<select id="orientation">
<option value="landscape">Landscape</option>
<option value="portrait">Portrait</option>
</select>
<label for="margin">Margins</label>
<select id="margin">
<option value="standard">Standard</option>
<option value="compact">Compact</option>
<option value="wide">Wide</option>
</select>
<label><input id="repeatHeader" type="checkbox" checked=""> Repeat table headers</label>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:rowData="rowData"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:defaultPdfExportParams="defaultPdfExportParams"></ag-grid-vue>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<InventoryData> | null>(null);
const rowData = ref<InventoryData[] | null>(
Array.from({ length: 40 }, (_, index) => {
const categories = ["Accessories", "Displays", "Networking", "Storage"];
const warehouses = ["London", "Chicago", "Singapore"];
const itemNumber = index + 1;
return {
item: `Item ${itemNumber}`,
category: categories[index % categories.length],
warehouse: warehouses[index % warehouses.length],
quantity: 20 + itemNumber * 3,
status: itemNumber % 4 === 0 ? "Reorder" : "Available",
};
}),
);
const columnDefs = ref<ColDef[]>([
{ field: "item", minWidth: 170 },
{ field: "category", minWidth: 130 },
{ field: "warehouse", minWidth: 120 },
{ field: "quantity" },
{ field: "status" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const defaultPdfExportParams = ref<PdfExportParams>({
documentTitle: "Quarterly Inventory",
page: {
size: "A4",
orientation: "landscape",
margin: 36,
},
repeatHeader: true,
columnWidth: "auto",
});
function onPdfExportOptionsChanged() {
gridApi.value.setGridOption(
"defaultPdfExportParams",
getPdfExportParams(),
);
}
function onBtExport() {
gridApi.value.exportDataAsPdf();
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
rowData,
columnDefs,
defaultColDef,
defaultPdfExportParams,
onGridReady,
onPdfExportOptionsChanged,
onBtExport,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}