---
title: "PDF Export - Styles"
enterprise: true
framework: javascript
version: "36.1.0"
---

# 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.

#### PDF Styling

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} 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,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    {
      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: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  defaultPdfExportParams: {
    colors: {
      headerBackgroundColor: "#e8f1ff",
      headerTextColor: "#123a5a",
      borderColor: "#c3d4ea",
      oddRowBackgroundColor: "#0057af",
    },
  },
};

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then(function (data) {
    gridApi!.setGridOption("rowData", data);
  });

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}
```

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

## Automatic Grid Styles

PDF Export can evaluate 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.

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 {
  CellStyle,
  CellStyleFunc,
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowStyleModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CellStyleModule,
  RowStyleModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

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

const columnDefs: ColDef<IOlympicData>[] = [
  { field: "athlete", minWidth: 220, sort: "asc" },
  { field: "country", minWidth: 180 },
  { field: "sport", minWidth: 140 },
  {
    field: "total",
    headerStyle: () => ({
      backgroundColor: "#dbeafe",
      color: "#0f172a",
      fontWeight: "700",
    }),
    cellStyle,
  },
];

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs,
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  getRowStyle: (params) =>
    (params.data?.athlete ?? "") === ""
      ? { backgroundColor: "#da4d4d" }
      : undefined,
  onGridReady: (params: GridReadyEvent) => {
    params.api.setGridOption("rowData", data);
  },
};

function onSkipGridStylesChange() {
  const skipGridStyles =
    document.querySelector<HTMLInputElement>("#skipGridStyles")?.checked ??
    false;
  gridApi!.setGridOption("defaultPdfExportParams", { skipGridStyles });
}

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onSkipGridStylesChange = onSkipGridStylesChange;
  (<any>window).onBtExport = onBtExport;
}
```

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

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.

## 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.

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

#### Rows And Cells Override

```ts
import {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  PdfStyleCallbackParams,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { data } from "./data";
import { IOlympicData } from "./interfaces";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

let gridApi: GridApi<IOlympicData>;

const columnDefs: ColDef<IOlympicData>[] = [
  { field: "athlete", minWidth: 220, sort: "asc" },
  { field: "country", minWidth: 180 },
  { field: "sport", minWidth: 140 },
  { field: "total" },
];

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs,
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  onGridReady: (params: GridReadyEvent) => {
    params.api.setGridOption("rowData", data);
  },

  defaultPdfExportParams: {
    processStyleCallback: (params: PdfStyleCallbackParams) => {
      if (params.type === "header") {
        return {
          backgroundColor: "#e0f2fe",
          color: "#0c4a6e",
          fontFamily: "Helvetica-Bold",
        };
      }
    },
  },
};

function onBtExport() {
  gridApi!.exportDataAsPdf();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}
```

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

## Text And Box Styles

`PdfCellStyle` supports built-in PDF fonts, font size and weight, 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.

Use the top-level export parameters to configure document-wide typography and table boxes:

```js
api.exportDataAsPdf({
    fontFamily: 'Times-Roman',
    headerFontFamily: 'Times-Bold',
    fontSize: 9,
    headerFontSize: 10,
    cellPadding: 4,
    drawCellBorders: true,
});
```