PDF Export uses Value Getters and, by default, Value Formatters. Export callbacks can replace the resulting text without changing the values displayed in the grid.
Customising Cell and Row Group Values Copy Link
Use processCellCallback and processRowGroupCallback in defaultPdfExportParams to customise exported body cells and row groups.
<ag-grid-angular
[processCellCallback]="processCellCallback"
[processRowGroupCallback]="processRowGroupCallback"
/* other grid options ... */ />
this.processCellCallback = (params) => `_${params.value ?? ''}_`;
this.processRowGroupCallback = (params) => `row group: ${params.node.key ?? ''}`;See below the functions on the PdfExportParams interface to customise exported grid cell and row group values.
A callback function invoked once per cell in the grid. Return a string value to be displayed in the export. For example this is useful for formatting date values.
|
A callback function invoked once per row group. Return a string to be displayed in the group cell.
|
The following example adds the prefix row group: to row-group values and surrounds body-cell values with underscores in the exported PDF.
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PdfExportParams,
ProcessCellForExportParams,
ProcessRowGroupForExportParams,
enableDevValidations,
} from "ag-grid-community";
import {
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
]);
interface ResultData {
athlete: string;
country: string;
sport: string;
gold: number;
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="example-wrapper">
<button (click)="onBtExport()">Export to PDF</button>
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[groupDefaultExpanded]="groupDefaultExpanded"
[defaultPdfExportParams]="defaultPdfExportParams"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div> `,
})
export class AppComponent {
private gridApi!: GridApi<ResultData>;
columnDefs: ColDef[] = [
{ field: "athlete", minWidth: 180 },
{ field: "country", rowGroup: true, hide: true },
{ field: "sport", minWidth: 140 },
{ field: "gold" },
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
groupDefaultExpanded = -1;
defaultPdfExportParams: PdfExportParams = {
processCellCallback(params: ProcessCellForExportParams): string {
return `_${params.value ?? ""}_`;
},
processRowGroupCallback(params: ProcessRowGroupForExportParams): string {
return `row group: ${params.node.key ?? ""}`;
},
};
rowData: ResultData[] | null = [
{
athlete: "Asha Patel",
country: "United Kingdom",
sport: "Rowing",
gold: 2,
},
{
athlete: "Noah Williams",
country: "United Kingdom",
sport: "Cycling",
gold: 1,
},
{ athlete: "Sofia Rossi", country: "Italy", sport: "Swimming", gold: 3 },
{ athlete: "Marco Bianchi", country: "Italy", sport: "Fencing", gold: 1 },
];
onBtExport() {
this.gridApi.exportDataAsPdf();
}
onGridReady(params: GridReadyEvent<ResultData>) {
this.gridApi = params.api;
}
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
Customising Column Headers and Group Header Values Copy Link
Use processHeaderCallback and processGroupHeaderCallback to customise exported column headers and column-group headers.
<ag-grid-angular
[processHeaderCallback]="processHeaderCallback"
[processGroupHeaderCallback]="processGroupHeaderCallback"
/* other grid options ... */ />
this.processHeaderCallback = (params) => `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
this.processGroupHeaderCallback = (params) =>
`group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;See below the functions on the PdfExportParams interface to customise exported column group headers and headers.
A callback function invoked once per column. Return a string to be displayed in the column header.
|
A callback function invoked once per column group. Return a string to be displayed in the column group header. Note that column groups are exported by default, this option will not work with skipColumnGroupHeaders=true.
|
The following example prefixes exported headers with header: and exported group headers with group header: .
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
ColumnApiModule,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PdfExportParams,
ProcessGroupHeaderForExportParams,
ProcessHeaderForExportParams,
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,
ColumnApiModule,
ContextMenuModule,
PdfExportModule,
]);
interface ResultData {
athlete: string;
country: string;
gold: number;
silver: number;
}
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="example-wrapper">
<button (click)="onBtExport()">Export to PDF</button>
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[defaultPdfExportParams]="defaultPdfExportParams"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div> `,
})
export class AppComponent {
private gridApi!: GridApi<ResultData>;
columnDefs: (ColDef | ColGroupDef)[] = [
{
headerName: "Athlete Details",
children: [
{ field: "athlete", minWidth: 180 },
{ field: "country", minWidth: 150 },
],
},
{
headerName: "Medal Results",
children: [{ field: "gold" }, { field: "silver" }],
},
];
defaultColDef: ColDef = {
flex: 1,
minWidth: 100,
};
defaultPdfExportParams: PdfExportParams = {
processHeaderCallback(params: ProcessHeaderForExportParams): string {
return `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
},
processGroupHeaderCallback(
params: ProcessGroupHeaderForExportParams,
): string {
return `group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;
},
};
rowData: ResultData[] | null = [
{ athlete: "Asha Patel", country: "United Kingdom", gold: 2, silver: 1 },
{ athlete: "Sofia Rossi", country: "Italy", gold: 3, silver: 2 },
{ athlete: "Mei Chen", country: "Singapore", gold: 1, silver: 2 },
];
onBtExport() {
this.gridApi.exportDataAsPdf();
}
onGridReady(params: GridReadyEvent<ResultData>) {
this.gridApi = params.api;
}
}
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
enableProdMode();
}
const app = bootstrapApplication(AppComponent, {
providers: [provideHttpClient()],
});
These callbacks return text. To style the processed result, use processStyleCallback; its value is the final exported string.