---
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: vue
version: "36.2.0"
related:
    - title: "Languages"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/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-vue
    :colors="colors"
    /* other grid options ... */>
</ag-grid-vue>

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export PDF</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultPdfExportParams="defaultPdfExportParams"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<(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" },
        ],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const defaultPdfExportParams = ref<PdfExportParams>({
      colors: {
        headerBackgroundColor: "#e8f1ff",
        headerTextColor: "#123a5a",
        borderColor: "#c3d4ea",
        oddRowBackgroundColor: "#0057af",
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtExport() {
      gridApi.value!.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => {
        rowData.value = data;
      };

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultPdfExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";

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

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

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 VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export PDF</button>
        <label class="option" for="skipGridStyles" v-on:change="onSkipGridStylesChange()">
          <input id="skipGridStyles" type="checkbox">
            Skip Grid Styles
          </label>
        </div>
        <div class="grid-wrapper">
          <ag-grid-vue
            style="width: 100%; height: 100%;"
            @grid-ready="onGridReady"
            :columnDefs="columnDefs"
            :defaultColDef="defaultColDef"
            :getRowStyle="getRowStyle"
            :rowData="rowData"></ag-grid-vue>
          </div>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const getRowStyle = ref<GetRowStyle>((params) =>
      (params.data?.athlete ?? "") === ""
        ? { backgroundColor: "#da4d4d" }
        : undefined,
    );
    const rowData = ref<IOlympicData[]>(null);

    function onSkipGridStylesChange() {
      const skipGridStyles =
        document.querySelector<HTMLInputElement>("#skipGridStyles")?.checked ??
        false;
      gridApi.value!.setGridOption("defaultPdfExportParams", {
        skipGridStyles,
      });
    }
    function onBtExport() {
      gridApi.value!.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      params.api.setGridOption("rowData", data);
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      getRowStyle,
      rowData,
      onGridReady,
      onSkipGridStylesChange,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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";
import { IOlympicData } from "./interfaces";

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export PDF</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultPdfExportParams="defaultPdfExportParams"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 220, sort: "asc" },
      { field: "country", minWidth: 180 },
      { field: "sport", minWidth: 140 },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      minWidth: 100,
      flex: 1,
    });
    const defaultPdfExportParams = ref<PdfExportParams>({
      processStyleCallback: (params: PdfStyleCallbackParams) => {
        if (params.type === "header") {
          return {
            backgroundColor: "#e0f2fe",
            color: "#0c4a6e",
            fontFamily: "Helvetica-Bold",
          };
        }
      },
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtExport() {
      gridApi.value!.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      params.api.setGridOption("rowData", data);
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultPdfExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue-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/vue-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` |  |  |  |