JavaScript Data GridPDF Export - Images

Version 36.2.0

Enterprise

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 Copy Link

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.

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.

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

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.controls {
    margin-bottom: 8px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

.country-flag {
    height: 14px;
    margin-right: 8px;
    object-fit: contain;
    vertical-align: middle;
    width: 21px;
}

data.ts

export const flagImages: Record<string, string> = {
    gb: 'iVBORw0KGgoAAAANSUhEUgAAACgAAAAUCAMAAADImI+JAAAANlBMVEX////w8vfyxcx8jbJCWpAOLHFVa5sBIWnIEC7WTGLnv8qAkLTheYpecqHx0digrMfz3+T21dqBS5WQAAAApUlEQVQoz8WTyxpFMAyEpyqOuhTv/7IntImmurAzC59kfsIIhA5wnn6iASMLgzbIT2Fk6joUaAUKBsiJm+kJ0iyuR1mQBam8Cex1dINkZ6EesSZwrR8JfdYWl7AcbCRw5ypytYmPpy6w3X6jL8HXL6PxOODgTPYEcnXmFe94cuBsdJzwpIFrRwK3WPkJLQqL2aUoUVisXjOvLizWWNyMVljrV0gz/wdhEi0lRIbcAAAAAElFTkSuQmCC',
    us: 'iVBORw0KGgoAAAANSUhEUgAAACYAAAAUCAMAAADWUb86AAAANlBMVEXZjKGzGUL////GU3IKMWEPNmUbP2wiRXFXcpNGY4hfeJhsg6A8P2o1OGSiS27O1d+RHUeveZPx6bSjAAAAiUlEQVQoz8WPWQ7DIBQDXxK/DUiX+1+2puryAxV/HaRRJCw7CJznLcNtGyIalmaUe9ddxsCKeVJMh+O6DxEt7NPQNH6lz0bBW0/KkmHMRrVqMSq60mejQIUnZYGquBxDhLf935COQs1inzZ/tk1f+moL+9l2trO1r2axfQk5lliNLY4usi3xl9EHqT4JB9bfy1wAAAAASUVORK5CYII=',
    de: 'iVBORw0KGgoAAAANSUhEUgAAACEAAAAUBAMAAADxfUlCAAAAD1BMVEUAAABKAADdAAD0igD/zgDupiNjAAAAIUlEQVQY02NgoCMQRAMCDEpoQIGGIsZowIDBBQ040E4EAM/nLQEUDzk4AAAAAElFTkSuQmCC',
    br: 'iVBORw0KGgoAAAANSUhEUgAAAB0AAAAUCAMAAABGQsb1AAAAhFBMVEUAlED/ywAwJoH7yAKluBZBoi8HlT7cwwk3LYMTmDtgTGQonTXFvw5gqCjsxgVLRYwYmTqIsR6dfDw4LHtRSpRANoNapynltRDPr1ClgzfEmySmtMRZV5aOpLPwvgnTqBt5YFNKO3BIOXG1x8x2b6t+ryDD0taVmLt9ladfV55uXnidlFzb5JoEAAAArElEQVQoz62RRw6DQBAEmV7CsoQlmpyd/f//+YCQAYOQJfe1pFFNt6L8K/pJ34eaQYa2w0yViIhUcws6bt12YdfWrvPFLJuaHgDQN2RbSxufEXs+Ig4AghG76AsborS6V8VQnIGc6GPnjTZBBADyNpTB3G6i4AAHoutrpN78ci45wDkg0/nlyUpAIuYoBSPm6+uPkhAAj+Nk/dHYBstEKDK20cZRkwcrHC34Y95zFAiJFEm9WAAAAABJRU5ErkJggg==',
};

interfaces.ts

export interface CountryData {
    country: string;
    countryCode: string;
    capital: string;
    population: string;
}

export interface ImageContext {
    flagImages: Record<string, string>;
}

countryCellRenderer.ts

import type { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';

import type { CountryData, ImageContext } from './interfaces';

export class CountryCellRenderer implements ICellRendererComp {
    private readonly eGui = document.createElement('div');

    public init(params: ICellRendererParams<CountryData, string, ImageContext>): void {
        const data = params.data;
        const image = document.createElement('img');
        image.alt = data ? `${data.country} flag` : '';
        image.className = 'country-flag';
        image.src = data ? `data:image/png;base64,${params.context.flagImages[data.countryCode]}` : '';

        this.eGui.append(image, document.createTextNode(params.value ?? ''));
    }

    public getGui(): HTMLElement {
        return this.eGui;
    }

    public refresh(): boolean {
        return false;
    }
}

index.html

<div class="example-wrapper">
    <div class="controls">
        <button onclick="onBtExport()">Export PDF</button>
    </div>
    <div id="myGrid"></div>
</div>

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 Copy Link

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.

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.

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

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.controls {
    margin-bottom: 8px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

data.ts

export const companyLogoLightTheme =
    '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';

export const companyLogoDarkTheme =
    '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';

index.html

<div class="example-wrapper">
    <div class="controls">
        <button onclick="onBtExport()">Export PDF</button>
    </div>
    <div id="myGrid"></div>
</div>

Known Limitations Copy Link

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 Copy Link

Export Options Copy Link

PdfHeaderFooterConfig

Page header and footer content.

Function

Callback that provides an image for an exported body cell. Return an optional value to replace the exported cell text.

PdfImage Copy Link

Properties available on the PdfImage interface.

string

Identifier used to embed repeated images only once in the PDF.

string

Base64 image data, with or without a data URL prefix.

PdfImageType

Image format.

string

Alternative text for the image.

number

Rendered width in points. When omitted, the intrinsic image width is used at 96 DPI. Setting only one of width and height preserves the aspect ratio; setting both stretches the image to those dimensions.

number

Rendered height in points. When omitted, the intrinsic image height is used at 96 DPI. Setting only one of width and height preserves the aspect ratio; setting both stretches the image to those dimensions.

PdfImageAlignment

default: 'start'

Image alignment relative to adjacent text.

number

default: 4

Space between the image and adjacent text in points.

PdfCellImageCallbackParams Copy Link

Properties available on the PdfCellImageCallbackParams<TData = any, TContext = any> interface.

string

The final text exported for the cell.

number

The 1-based index of the current exported row.

IRowNode

The row node for the exported cell.

Column

The current column.

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

PdfCellImageResult Copy Link

Properties available on the PdfCellImageResult interface.

PdfImage

Image rendered in the exported cell.

string | null

Text rendered alongside the image. When omitted, the exported cell text is removed.

PdfHeaderFooterTextContent Copy Link

Properties available on the PdfHeaderFooterTextContent interface.

string

Header or footer text. Supports &[Page], &[Pages], &[Date], and &[Time] placeholders.

PdfImage

Image rendered alongside the text.

'Left' | 'Center' | 'Right'

Position of the content within the printable page width. When omitted, array entries default to left, centre, and right in order.

PdfTextStyle

Text styling for this entry.

PdfHeaderFooterImageContent Copy Link

Properties available on the PdfHeaderFooterImageContent interface.

string

Header or footer text. Supports &[Page], &[Pages], &[Date], and &[Time] placeholders.

PdfImage

Image rendered alongside the text.

'Left' | 'Center' | 'Right'

Position of the content within the printable page width. When omitted, array entries default to left, centre, and right in order.

PdfTextStyle

Text styling for this entry.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridPDF Export - Images

Images In Grid Cells Copy Link

Images In Page Headers And Footers Copy Link

Known Limitations Copy Link

API Copy Link

Export Options Copy Link

PdfImage Copy Link

PdfCellImageCallbackParams Copy Link

PdfCellImageResult Copy Link

PdfHeaderFooterTextContent Copy Link

PdfHeaderFooterImageContent Copy Link