PDF Export uses colours from the active grid theme by default. Use colors to override page, body-row, alternate-row, header, text, and border colours for the exported document.
<ag-grid-angular
[colors]="colors"
/* other grid options ... */ />
this.colors = {
headerBackgroundColor: '#123a5a',
headerTextColor: '#ffffff',
oddRowBackgroundColor: '#f3f6f8',
};Export the following example to see the effect of these overrides: the exported PDF uses the configured header and row colours rather than the grid's on-screen theme.
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
PdfExportParams,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
PdfExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
PdfExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="container">
<div>
<button
(click)="onBtExport()"
style="margin-bottom: 5px; font-weight: bold"
>
Export PDF
</button>
</div>
<div class="grid-wrapper">
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[defaultPdfExportParams]="defaultPdfExportParams"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div>
</div> `,
})
export class AppComponent {
private gridApi!: GridApi<IOlympicData>;
columnDefs: (ColDef | ColGroupDef)[] = [
{
headerName: "Group A",
children: [
{ field: "athlete", minWidth: 200 },
{ field: "country", minWidth: 200 },
],
},
{
headerName: "Group B",
children: [
{ field: "sport", minWidth: 150 },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
{ field: "total" },
],
},
];
defaultColDef: ColDef = {
filter: true,
minWidth: 100,
flex: 1,
};
defaultPdfExportParams: PdfExportParams = {
colors: {
headerBackgroundColor: "#e8f1ff",
headerTextColor: "#123a5a",
borderColor: "#c3d4ea",
oddRowBackgroundColor: "#0057af",
},
};
rowData!: IOlympicData[];
constructor(private http: HttpClient) {}
onBtExport() {
this.gridApi.exportDataAsPdf();
}
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) => {
this.rowData = data;
});
}
}
.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;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.columns {
display: flex;
flex-direction: row;
gap: 16px;
}
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()],
});
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
} Automatic Grid Styles Copy Link
PDF Export evaluates supported grid style definitions during serialisation:
rowStyleandgetRowStyleare applied to the exported row.colDef.cellStyleis applied to each exported body cell.colDef.headerStyleis applied to exported header cells.- A cell style overrides the row style for properties supplied by both.
const columnDefs: ColDef[] = [
{
field: 'status',
cellStyle: {
color: '#b42318',
fontWeight: 'bold',
},
},
];For function-based cellStyle, the value parameter is the grid's display value before PDF export callbacks process it. This allows existing grid styling logic to continue working when processCellCallback changes the exported text.
Only properties represented by PdfCellStyle are converted. CSS classes, cellClass, cellClassRules, arbitrary CSS, and Cell Renderer styles are not exported.
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
CellStyle,
CellStyleFunc,
CellStyleModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GetRowStyle,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
RowStyleModule,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
CellStyleModule,
RowStyleModule,
PdfExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="container">
<div>
<button
(click)="onBtExport()"
style="margin-bottom: 5px; font-weight: bold"
>
Export PDF
</button>
<label
class="option"
for="skipGridStyles"
(change)="onSkipGridStylesChange()"
>
<input id="skipGridStyles" type="checkbox" />
Skip Grid Styles
</label>
</div>
<div class="grid-wrapper">
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[getRowStyle]="getRowStyle"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div>
</div> `,
})
export class AppComponent {
private gridApi!: GridApi<IOlympicData>;
columnDefs: ColDef[] = [
{ field: "athlete", minWidth: 220, sort: "asc" },
{ field: "country", minWidth: 180 },
{ field: "sport", minWidth: 140 },
{
field: "total",
headerStyle: () => ({
backgroundColor: "#dbeafe",
color: "#0f172a",
fontWeight: "700",
}),
cellStyle,
},
];
defaultColDef: ColDef = {
filter: true,
minWidth: 100,
flex: 1,
};
getRowStyle: GetRowStyle = (params) =>
(params.data?.athlete ?? "") === ""
? { backgroundColor: "#da4d4d" }
: undefined;
rowData!: IOlympicData[];
onSkipGridStylesChange() {
const skipGridStyles =
document.querySelector<HTMLInputElement>("#skipGridStyles")?.checked ??
false;
this.gridApi.setGridOption("defaultPdfExportParams", { skipGridStyles });
}
onBtExport() {
this.gridApi.exportDataAsPdf();
}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.gridApi = params.api;
params.api.setGridOption("rowData", data);
}
}
const cellStyle: CellStyleFunc = (params) => {
const total = Number(params.value ?? 0);
if (total >= 5) {
return {
backgroundColor: "#e1f3e8",
color: "#1b5e20",
fontWeight: "700",
} as CellStyle;
}
if (total <= 2) {
return {
color: "#8b1d1d",
fontWeight: "700",
};
}
return undefined;
};
.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;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.columns {
display: flex;
flex-direction: row;
gap: 16px;
}
export const data = [
{
athlete: '',
age: 0,
country: 'Unknown',
year: 2024,
date: '01/01/2024',
sport: 'N/A',
gold: 0,
silver: 0,
bronze: 0,
total: 0,
},
{
athlete: 'Ava Reed',
age: 24,
country: 'USA',
year: 2024,
date: '07/08/2024',
sport: 'Swimming',
gold: 2,
silver: 1,
bronze: 2,
total: 5,
},
{
athlete: 'Ben Carter',
age: 28,
country: 'Canada',
year: 2024,
date: '08/08/2024',
sport: 'Rowing',
gold: 0,
silver: 1,
bronze: 1,
total: 2,
},
{
athlete: 'Chloe Kim',
age: 22,
country: 'Korea',
year: 2024,
date: '09/08/2024',
sport: 'Archery',
gold: 1,
silver: 2,
bronze: 1,
total: 4,
},
{
athlete: 'Diego Mora',
age: 30,
country: 'Spain',
year: 2024,
date: '10/08/2024',
sport: 'Cycling',
gold: 3,
silver: 1,
bronze: 1,
total: 5,
},
{
athlete: 'Ella Stone',
age: 26,
country: 'UK',
year: 2024,
date: '11/08/2024',
sport: 'Athletics',
gold: 0,
silver: 1,
bronze: 0,
total: 1,
},
{
athlete: 'Farah Khan',
age: 27,
country: 'India',
year: 2024,
date: '12/08/2024',
sport: 'Shooting',
gold: 2,
silver: 2,
bronze: 1,
total: 5,
},
{
athlete: 'Hugo Silva',
age: 29,
country: 'Brazil',
year: 2024,
date: '13/08/2024',
sport: 'Judo',
gold: 1,
silver: 1,
bronze: 1,
total: 3,
},
{
athlete: 'Iris Young',
age: 23,
country: 'Australia',
year: 2024,
date: '14/08/2024',
sport: 'Surfing',
gold: 4,
silver: 1,
bronze: 1,
total: 6,
},
{
athlete: 'Jon Park',
age: 31,
country: 'Japan',
year: 2024,
date: '15/08/2024',
sport: 'Gymnastics',
gold: 0,
silver: 1,
bronze: 0,
total: 1,
},
];
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()],
});
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
}Set skipGridStyles=true to skip grid style definitions and use only theme defaults, colors, and PDF-specific overrides. This also skips colDef.wrapText and colDef.wrapHeaderText integration.
this.gridApi.exportDataAsPdf({
skipGridStyles: true,
}); PDF-Specific Overrides Copy Link
Use processStyleCallback to style exported elements without changing the grid. The callback receives type: 'row' | 'cell' | 'rowgroup' | 'header' | 'groupheader' and the final exported text in value for cell and header elements.
this.gridApi.exportDataAsPdf({
processStyleCallback: ({ type, value }) => {
return type === 'cell' && value === 'Late' ? { color: '#b42318', fontWeight: 'bold' } : undefined;
},
});Styles returned by processStyleCallback take precedence over automatic grid styles:
- A
rowresult overridesrowStyleandgetRowStylefor that row. - A
cellorrowgroupresult overrides the resolved row style andcolDef.cellStylefor that cell. - A
headerorgroupheaderresult overridescolDef.headerStylefor that header.
processStyleCallback still runs when skipGridStyles=true.
Export the following example to see the callback override the "Late" cells with a red, bold style in the PDF:
import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
PdfExportParams,
PdfStyleCallbackParams,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
PdfExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
import { IOlympicData } from "./interfaces";
@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div class="container">
<div>
<button
(click)="onBtExport()"
style="margin-bottom: 5px; font-weight: bold"
>
Export PDF
</button>
</div>
<div class="grid-wrapper">
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[defaultPdfExportParams]="defaultPdfExportParams"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
</div>
</div> `,
})
export class AppComponent {
private gridApi!: GridApi<IOlympicData>;
columnDefs: ColDef[] = [
{ field: "athlete", minWidth: 220, sort: "asc" },
{ field: "country", minWidth: 180 },
{ field: "sport", minWidth: 140 },
{ field: "total" },
];
defaultColDef: ColDef = {
filter: true,
minWidth: 100,
flex: 1,
};
defaultPdfExportParams: PdfExportParams = {
processStyleCallback: (params: PdfStyleCallbackParams) => {
if (params.type === "header") {
return {
backgroundColor: "#e0f2fe",
color: "#0c4a6e",
fontFamily: "Helvetica-Bold",
};
}
},
};
rowData!: IOlympicData[];
onBtExport() {
this.gridApi.exportDataAsPdf();
}
onGridReady(params: GridReadyEvent<IOlympicData>) {
this.gridApi = params.api;
params.api.setGridOption("rowData", data);
}
}
.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;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.columns {
display: flex;
flex-direction: row;
gap: 16px;
}
export const data = [
{
athlete: '',
age: 0,
country: 'Unknown',
year: 2024,
date: '01/01/2024',
sport: 'N/A',
gold: 0,
silver: 0,
bronze: 0,
total: 0,
},
{
athlete: 'Ava Reed',
age: 24,
country: 'USA',
year: 2024,
date: '07/08/2024',
sport: 'Swimming',
gold: 2,
silver: 1,
bronze: 2,
total: 5,
},
{
athlete: 'Ben Carter',
age: 28,
country: 'Canada',
year: 2024,
date: '08/08/2024',
sport: 'Rowing',
gold: 0,
silver: 1,
bronze: 1,
total: 2,
},
{
athlete: 'Chloe Kim',
age: 22,
country: 'Korea',
year: 2024,
date: '09/08/2024',
sport: 'Archery',
gold: 1,
silver: 2,
bronze: 1,
total: 4,
},
{
athlete: 'Diego Mora',
age: 30,
country: 'Spain',
year: 2024,
date: '10/08/2024',
sport: 'Cycling',
gold: 3,
silver: 1,
bronze: 1,
total: 5,
},
{
athlete: 'Ella Stone',
age: 26,
country: 'UK',
year: 2024,
date: '11/08/2024',
sport: 'Athletics',
gold: 0,
silver: 1,
bronze: 0,
total: 1,
},
{
athlete: 'Farah Khan',
age: 27,
country: 'India',
year: 2024,
date: '12/08/2024',
sport: 'Shooting',
gold: 2,
silver: 2,
bronze: 1,
total: 5,
},
{
athlete: 'Hugo Silva',
age: 29,
country: 'Brazil',
year: 2024,
date: '13/08/2024',
sport: 'Judo',
gold: 1,
silver: 1,
bronze: 1,
total: 3,
},
{
athlete: 'Iris Young',
age: 23,
country: 'Australia',
year: 2024,
date: '14/08/2024',
sport: 'Surfing',
gold: 4,
silver: 1,
bronze: 1,
total: 6,
},
{
athlete: 'Jon Park',
age: 31,
country: 'Japan',
year: 2024,
date: '15/08/2024',
sport: 'Gymnastics',
gold: 0,
silver: 1,
bronze: 0,
total: 1,
},
];
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()],
});
export interface IOlympicData {
athlete: string,
age: number,
country: string,
year: number,
date: string,
sport: string,
gold: number,
silver: number,
bronze: number,
total: number
} Text And Box Styles Copy Link
PdfCellStyle supports registered TrueType and built-in PDF fonts, font size, weight and style, text direction, text and background colours, borders, padding, alignment, wrapping, explicit line-break preservation, line height, maximum lines, and overflow behaviour. Margin is supported for the document title only. See Languages for custom font registration and Unicode text.
Use defaultCellStyle and defaultHeaderStyle to configure table-wide typography and box styles. defaultCellStyle applies to body cells, including custom content rows. Header and group-header cells use defaultHeaderStyle, with every unset property inherited from defaultCellStyle.
this.gridApi.exportDataAsPdf({
defaultCellStyle: {
fontFamily: 'Times-Roman',
fontSize: 9,
padding: 4,
},
defaultHeaderStyle: {
fontSize: 10,
},
drawCellBorders: true,
});The cascade is applied separately to each property. For example, if defaultCellStyle.fontSize is 9 and defaultHeaderStyle.fontSize is not set, both body and header cells use 9pt text. Set the header value explicitly when it should differ.
When neither style sets a font size, body cells use 10pt text and headers use 11pt text. Headers derive a bold face from the resolved body font when no font weight is inherited or set.
API Copy Link
Export Options Copy Link
See below the functions on the PdfExportParams interface to customise exported grid values.
Override PDF colours. Any missing values fall back to the current theme.
|
Set to true to skip applying grid style definitions and callbacks (rowStyle, getRowStyle, colDef.cellStyle, colDef.headerStyle). Use this when you want to rely only on colors and theme defaults. |
Callback that allows overriding styles for rows, cells, row groups, headers and group headers during PDF export. Returned styles are merged after resolved grid styles and take precedence.
|
Default style applied to every body cell, including custom content rows. Grid styles, row and cell styles, and processStyleCallback results override these values. When no style is provided, body cells use Helvetica at 10 points. |
Default style applied to header and group-header cells. Each unset property inherits from defaultCellStyle; values set here take precedence. If neither style sets fontSize, headers use 11 points. If no font weight is inherited or set, headers use the bold variant of the resolved body font. |
Set to false to skip drawing cell borders. |
PdfColors Copy Link
Properties available on the PdfColors interface.
Background colour for the PDF page. |
Background colour for body rows. |
Alternate background colour for odd body rows. |
Text colour for body rows. |
Background colour for header rows. |
Text colour for header rows. |
Border colour for cell outlines. |
PdfCellStyle Copy Link
Properties available on the PdfCellStyle interface.
Background colour.
|
Border colour.
|
Border width in points. Defaults to 1 when borderColor is set, otherwise 0.
|
Padding inside the cell in points. A number applies to all sides.
|
Horizontal alignment for the cell text.
|
Whether text should wrap onto multiple lines. Wrapped content increases the row height as required. |
Whether explicit line breaks should be preserved. |
Whether repeated, leading and trailing spaces should be preserved when text wraps. |
Maximum number of rendered text lines.
|
How text exceeding the available width, height or line limit is indicated. |
Font size in points.
|
Font family.
|
Font weight. When omitted, the weight from the resolved font family is preserved.
|
Font style. |
Text direction. auto uses the first strong directional character. When omitted, the export-level direction is used. Text direction does not change exported column order.
|
BCP 47 language tag used when selecting language-specific OpenType features. When omitted, the export-level language is used.
|
Text colour.
|
Distance between text baselines in points. Defaults to the natural line height from the resolved font metrics, with a minimum of fontSize.
|