---
product: "AG Grid"
title: "PDF Export - Styles"
description: "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."
enterprise: true
framework: angular
version: "36.2.0"
related:
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Styles

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.

```ts
<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.

#### PDF Styling

```ts
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;
      });
  }
}
```

[Live example: PDF Styling](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-styling/angular/)

## Automatic Grid Styles

PDF Export evaluates supported grid style definitions during serialisation:

1. `rowStyle` and `getRowStyle` are applied to the exported row.
2. `colDef.cellStyle` is applied to each exported body cell.
3. `colDef.headerStyle` is applied to exported header cells.
4. A cell style overrides the row style for properties supplied by both.

```ts
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.

#### Rows And Cells

```ts
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;
};
```

[Live example: Rows And Cells](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-rows-and-cells/angular/)

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.

```ts
this.gridApi.exportDataAsPdf({
    skipGridStyles: true,
});
```

## PDF-Specific Overrides

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.

```ts
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:

1. A `row` result overrides `rowStyle` and `getRowStyle` for that row.
2. A `cell` or `rowgroup` result overrides the resolved row style and `colDef.cellStyle` for that cell.
3. A `header` or `groupheader` result overrides `colDef.headerStyle` for 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:

#### Rows And Cells Override

```ts
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);
  }
}
```

[Live example: Rows And Cells Override](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-styles/pdf-rows-and-cells-override/angular/)

## Text And Box Styles

`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](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-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](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/pdf-export-extra-content/) rows. Header and group-header cells use `defaultHeaderStyle`, with every unset property inherited from `defaultCellStyle`.

```ts
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

### Export Options

See below the functions on the `PdfExportParams` interface to customise exported grid values.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `colors` | `PdfColors` |  |  |  |
| `skipGridStyles` | `boolean` |  |  |  |
| `processStyleCallback` | `Function` |  |  |  |
| `defaultCellStyle` | `PdfCellStyle` |  |  |  |
| `defaultHeaderStyle` | `PdfCellStyle` |  |  |  |
| `drawCellBorders` | `boolean` |  |  |  |

### PdfColors

Properties available on the `PdfColors` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `string` |  |  |  |
| `dataBackgroundColor` | `string` |  |  |  |
| `oddRowBackgroundColor` | `string` |  |  |  |
| `foregroundColor` | `string` |  |  |  |
| `headerBackgroundColor` | `string` |  |  |  |
| `headerTextColor` | `string` |  |  |  |
| `borderColor` | `string` |  |  |  |

### PdfCellStyle

Properties available on the `PdfCellStyle` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `backgroundColor` | `string` |  |  |  |
| `borderColor` | `string` |  |  |  |
| `borderWidth` | `number` |  |  |  |
| `padding` | `number \| PdfMargin` |  |  |  |
| `alignment` | `PdfTextAlignment` |  |  |  |
| `wrapText` | `boolean` |  |  |  |
| `preserveLineBreaks` | `boolean` |  |  |  |
| `preserveSpaces` | `boolean` |  |  |  |
| `maxLines` | `number` |  |  |  |
| `overflow` | `PdfTextOverflow` |  |  |  |
| `fontSize` | `number` |  |  |  |
| `fontFamily` | `PdfFontFamily` |  |  |  |
| `fontWeight` | `PdfFontWeight` |  |  |  |
| `fontStyle` | `PdfFontStyle` |  |  |  |
| `direction` | `PdfTextDirection` |  |  |  |
| `language` | `string` |  |  |  |
| `color` | `string` |  |  |  |
| `lineHeight` | `number` |  |  |  |