---
product: "AG Grid"
title: "PDF Export - Customising Content"
description: "PDF Export uses Value Getters and, by default, . Export callbacks can replace the resulting text without changing the values displayed in the grid."
enterprise: true
framework: vue
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-extra-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/vue-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Customising Content

PDF Export uses Value Getters and, by default, [Value Formatters](https://www.ag-grid.com/archive/36.2.0/vue-data-grid/value-formatters/#formatting-for-export). Export callbacks can replace the resulting text without changing the values displayed in the grid.

## Customising Cell and Row Group Values

Use `processCellCallback` and `processRowGroupCallback` in `defaultPdfExportParams` to customise exported body cells and row groups.

```ts
<ag-grid-vue
    :processCellCallback="processCellCallback"
    :processRowGroupCallback="processRowGroupCallback"
    /* other grid options ... */>
</ag-grid-vue>

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.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processCellCallback` | `Function` |  |  |  |
| `processRowGroupCallback` | `Function` |  |  |  |

The following example adds the prefix `row group: ` to row-group values and surrounds body-cell values with underscores in the exported PDF.

#### PDF Export - Customising Row Groups

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <button v-on:click="onBtExport()">Export to PDF</button>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :groupDefaultExpanded="groupDefaultExpanded"
        :defaultPdfExportParams="defaultPdfExportParams"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ResultData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", rowGroup: true, hide: true },
      { field: "sport", minWidth: 140 },
      { field: "gold" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const groupDefaultExpanded = ref(-1);
    const defaultPdfExportParams = ref<PdfExportParams>({
      processCellCallback(params: ProcessCellForExportParams): string {
        return `_${params.value ?? ""}_`;
      },
      processRowGroupCallback(params: ProcessRowGroupForExportParams): string {
        return `row group: ${params.node.key ?? ""}`;
      },
    });
    const rowData = ref<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 },
    ]);

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

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

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

[Live example: PDF Export - Customising Row Groups](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-customising-content/pdf-export-customising-row-groups/vue3/)

## Customising Column Headers and Group Header Values

Use `processHeaderCallback` and `processGroupHeaderCallback` to customise exported column headers and column-group headers.

```ts
<ag-grid-vue
    :processHeaderCallback="processHeaderCallback"
    :processGroupHeaderCallback="processGroupHeaderCallback"
    /* other grid options ... */>
</ag-grid-vue>

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.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processHeaderCallback` | `Function` |  |  |  |
| `processGroupHeaderCallback` | `Function` |  |  |  |

The following example prefixes exported headers with `header: ` and exported group headers with `group header: `.

#### PDF Export - Customising Column Group Headers

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <button v-on:click="onBtExport()">Export to PDF</button>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :defaultPdfExportParams="defaultPdfExportParams"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<ResultData> | null>(null);
    const columnDefs = ref<(ColDef | ColGroupDef)[]>([
      {
        headerName: "Athlete Details",
        children: [
          { field: "athlete", minWidth: 180 },
          { field: "country", minWidth: 150 },
        ],
      },
      {
        headerName: "Medal Results",
        children: [{ field: "gold" }, { field: "silver" }],
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const defaultPdfExportParams = ref<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)}`;
      },
    });
    const rowData = ref<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 },
    ]);

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

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

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

[Live example: PDF Export - Customising Column Group Headers](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-customising-content/pdf-export-customising-column-group-headers/vue3/)

These callbacks return text. To style the processed result, use `processStyleCallback`; its `value` is the final exported string.