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

# PDF Export - Extra Content

PDF Export uses Value Getters and Value Formatters but does not export Cell Renderer output. Export callbacks can replace the resulting text without changing the grid.

## Document Title

Use `documentTitle` to set the PDF metadata title and render a visible title above the table. Use `documentTitleStyle` to configure its font, colour, border, padding, margin, alignment, wrapping, line height, line limit, and overflow behaviour.

#### Document Title

```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: {
    documentTitle: "Quarterly Results",
    documentTitleStyle: {
      fontSize: 16,
      padding: 6,
      margin: { bottom: 10 },
      backgroundColor: "#f3f6fb",
      borderColor: "#c3d4ea",
      borderWidth: 1,
      color: "#123a5a",
      alignment: "center",
    },
  },
};

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: Document Title](https://www.ag-grid.com/examples/pdf-export-extra-content/pdf-document-title/typescript/)

## Customising Exported Values

```js
api.exportDataAsPdf({
    processCellCallback: (params) => params.formatValue(params.value),
    processHeaderCallback: (params) => params.column.getColDef().headerName ?? params.column.getColId(),
    processGroupHeaderCallback: (params) => params.columnGroup.getColGroupDef()?.headerName ?? '',
    processRowGroupCallback: (params) => `Group: ${params.node.key ?? ''}`,
});
```

- `processCellCallback` customises body cell text.
- `processHeaderCallback` customises column header text.
- `processGroupHeaderCallback` customises column-group header text.
- `processRowGroupCallback` customises row-group text. Group indentation is applied independently.

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

## Additional Content

Use `prependContent`, `appendContent`, or `getCustomContentBelowRow` to add content that is not displayed in the grid. Strings create full-width rows. Use `PdfCell[][]` for explicit spans and styling.

See [PDF Export - Master Detail](https://www.ag-grid.com/javascript-data-grid/pdf-export-master-detail/) for an example that uses `getCustomContentBelowRow` to include detail data below each master row.

#### Custom Content

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  ProcessRowGroupForExportParams,
  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: [
    { field: "athlete", minWidth: 200 },
    { field: "country", minWidth: 160 },
    { field: "sport", minWidth: 140 },
    { field: "total" },
  ],
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  defaultPdfExportParams: {
    getCustomContentBelowRow: (params: ProcessRowGroupForExportParams) => {
      const rowIndex = params.node.rowIndex ?? 0;
      if ((rowIndex + 1) % 5 !== 0) {
        return;
      }

      return [
        [
          {
            data: { value: "Section break" },
            mergeAcross: 3,
            style: {
              backgroundColor: "#fff4cc",
              borderColor: "#f0c36d",
              borderWidth: 1,
              color: "#7a5400",
              padding: 6,
              alignment: "center",
            },
          },
        ],
      ];
    },
  },
};

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: Custom Content](https://www.ag-grid.com/examples/pdf-export-extra-content/pdf-custom-content/typescript/)