---
product: "AG Grid"
title: "PDF Export - Images"
description: "PDF Export can embed JPEG and PNG images in grid cells, page headers, and page footers. Images are embedded directly in the generated document without third-party libraries."
enterprise: true
framework: javascript
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-customising-content/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-columns/"
    - title: "Hyperlinks"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-hyperlinks/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# PDF Export - Images

PDF Export can embed JPEG and PNG images in grid cells, page headers, and page footers. Images are embedded directly in the generated document without third-party libraries.

## Images In Grid Cells

Load each image as a base64 string before export, then use `addImageToCell` to provide an image for an exported body cell. The callback receives the final exported cell value, row node, and column. Return the image together with the text that should appear alongside it.

```js
const gridOptions = {
    addImageToCell: (params) => {
        if (params.column.getColId() !== 'country') {
            return;
        }

        return {
            image: {
                id: params.node.data.countryCode,
                base64: flagImages[params.node.data.countryCode],
                imageType: 'png',
                width: 18,
                height: 12,
            },
            value: params.value,
        };
    },

    // other grid options ...
}
```

The image `id` is used to embed repeated images only once. Supply either `width` or `height` in PDF points and the image keeps its original aspect ratio; supplying both stretches the image to those exact dimensions. Use `alignment` to render the image before (`'start'`, the default) or after (`'end'`) the cell text, and `gap` to control the space between the image and the text.

The following example displays country flags with a Cell Renderer and exports the same flags alongside the country names in the PDF.

#### PDF Images In Cells

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfCellImageCallbackParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { CountryCellRenderer } from "./countryCellRenderer";
import { flagImages } from "./data";
import { CountryData, ImageContext } from "./interfaces";

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

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

let gridApi: GridApi<CountryData>;

const rows: CountryData[] = [
  {
    country: "United Kingdom",
    countryCode: "gb",
    capital: "London",
    population: "68.3 million",
  },
  {
    country: "United States",
    countryCode: "us",
    capital: "Washington, D.C.",
    population: "340.1 million",
  },
  {
    country: "Germany",
    countryCode: "de",
    capital: "Berlin",
    population: "84.7 million",
  },
  {
    country: "Brazil",
    countryCode: "br",
    capital: "Brasília",
    population: "212.6 million",
  },
];

const gridOptions: GridOptions<CountryData> = {
  columnDefs: [
    {
      field: "country",
      minWidth: 190,
      cellRenderer: CountryCellRenderer,
    },
    { field: "capital", minWidth: 170 },
    { field: "population", minWidth: 150 },
  ],
  defaultColDef: {
    flex: 1,
  },
  defaultPdfExportParams: {
    addImageToCell: (params: PdfCellImageCallbackParams<CountryData>) => {
      const countryCode = params.node.data?.countryCode;
      const flagImage = countryCode ? flagImages[countryCode] : undefined;
      if (
        params.column.getColId() !== "country" ||
        !countryCode ||
        !flagImage
      ) {
        return;
      }

      return {
        image: {
          id: `flag-${countryCode}`,
          base64: flagImage,
          imageType: "png",
          width: 20,
          height: 10,
          altText: `${params.value} flag`,
        },
        value: params.value,
      };
    },
  },
  context: {
    flagImages,
  } as ImageContext,
  rowData: rows,
};

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

gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  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: PDF Images In Cells](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-images/pdf-images-in-cells/typescript/)

Cell Renderer output is not captured automatically. Use `addImageToCell` to explicitly provide the image data required by the PDF.

## Images In Page Headers And Footers

Set `image` on a `PdfHeaderFooterContent` entry to add a company logo or other image to a page header or footer. An entry can contain an image, text, or both.

```ts
const defaultPdfExportParams = {
    headerFooterConfig: {
        all: {
            header: [
                {
                    position: 'Left',
                    image: {
                        id: 'company-logo',
                        base64: companyLogo,
                        imageType: 'png',
                        width: 92,
                    },
                },
                {
                    position: 'Right',
                    value: 'Page &[Page] of &[Pages]',
                },
            ],
        },
    },
};
```

The exported page colours follow the grid theme, so a logo designed for a light page can be hard to see when the grid uses a dark theme. Supply a logo variant for each theme and select one when exporting — reading the grid's background colour at export time keeps the choice in step with the active theme.

The following example adds the AG Grid logo to every page header, selecting a light or dark logo variant from the grid's background colour.

#### PDF Company Logo In Page Header

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfExportParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import { companyLogoDarkTheme, companyLogoLightTheme } from "./data";

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

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [{ field: "region" }, { field: "product" }, { field: "revenue" }],
  defaultColDef: {
    flex: 1,
  },
  defaultPdfExportParams: {
    documentTitle: "Annual Revenue",
  },
  rowData: Array.from({ length: 35 }, (_, index) => ({
    region: ["Americas", "EMEA", "APAC"][index % 3],
    product: ["Analytics", "Data Grid", "Reporting"][index % 3],
    revenue: `$${(125000 + index * 7350).toLocaleString("en-US")}`,
  })),
  onGridReady: (params) => {
    // the logo variant depends on the rendered grid theme, so configure the header once the grid
    // exists. Setting the grid option keeps the header on context menu exports as well as the button.
    params.api.setGridOption("defaultPdfExportParams", getPdfExportParams());
  },
};

function getHeaderLogo() {
  // exported page colours follow the grid theme, so pick the logo variant that stays visible.
  const gridBackground = getComputedStyle(
    document.querySelector<HTMLElement>(".ag-root-wrapper")!,
  ).backgroundColor;
  const [red = 255, green = 255, blue = 255] =
    gridBackground.match(/\d+(\.\d+)?/g)?.map(Number) ?? [];
  const isDarkTheme = red * 0.299 + green * 0.587 + blue * 0.114 < 128;

  return isDarkTheme
    ? { id: "company-logo-dark", base64: companyLogoDarkTheme }
    : { id: "company-logo-light", base64: companyLogoLightTheme };
}

function getPdfExportParams(): PdfExportParams {
  return {
    documentTitle: "Annual Revenue",
    headerFooterConfig: {
      all: {
        header: [
          {
            position: "Left",
            image: {
              ...getHeaderLogo(),
              imageType: "png",
              width: 92,
              altText: "AG Grid",
            },
          },
          {
            position: "Right",
            value: "Page &[Page] of &[Pages]",
          },
        ],
      },
    },
  };
}

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

gridApi = createGrid(
  document.querySelector<HTMLElement>("#myGrid")!,
  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: PDF Company Logo In Page Header](https://www.ag-grid.com/archive/36.2.0/examples/pdf-export-images/pdf-page-header-image/typescript/)

## Known Limitations

- PNG and JPEG are the supported formats. Typical web images work as-is, including PNG transparency, palette PNGs, and progressive JPEGs.
- GIF, SVG, WebP, animated images, interlaced PNG, 16-bit PNG, CMYK JPEG, lossless JPEG, and image collections are not supported.
- Cell Renderer output and images referenced by HTML or CSS are not captured automatically.
- A cell or page header/footer entry can contain one image.
- Images cannot currently be used on cover pages or as watermarks.
- Images cannot currently contain hyperlink annotations.
- Source images are embedded at their supplied resolution. Use appropriately sized images to limit the exported file size.

## API

### Export Options

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `headerFooterConfig` | `PdfHeaderFooterConfig` |  |  |  |
| `addImageToCell` | `Function` |  |  |  |

### PdfImage

Properties available on the `PdfImage` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` |  |  |  |
| `base64` | `string` |  |  |  |
| `imageType` | `PdfImageType` |  |  |  |
| `altText` | `string` |  |  |  |
| `width` | `number` |  |  |  |
| `height` | `number` |  |  |  |
| `alignment` | `PdfImageAlignment` |  |  |  |
| `gap` | `number` |  |  |  |

### PdfCellImageCallbackParams

Properties available on the `PdfCellImageCallbackParams&lt;TData = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` |  |  |  |
| `accumulatedRowIndex` | `number` |  |  |  |
| `node` | `IRowNode` |  |  |  |
| `column` | `Column` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

### PdfCellImageResult

Properties available on the `PdfCellImageResult` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `image` | `PdfImage` |  |  |  |
| `value` | `string \| null` |  |  |  |

### PdfHeaderFooterTextContent

Properties available on the `PdfHeaderFooterTextContent` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` |  |  |  |
| `image` | `PdfImage` |  |  |  |
| `position` | `'Left' \| 'Center' \| 'Right'` |  |  |  |
| `style` | `PdfTextStyle` |  |  |  |

### PdfHeaderFooterImageContent

Properties available on the `PdfHeaderFooterImageContent` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` |  |  |  |
| `image` | `PdfImage` |  |  |  |
| `position` | `'Left' \| 'Center' \| 'Right'` |  |  |  |
| `style` | `PdfTextStyle` |  |  |  |