Angular Data GridPDF Export - Hyperlinks

Version 36.2.0

Enterprise

PDF Export can add external URI hyperlinks to body cells and custom content. Hyperlinks are written as native PDF link annotations, so they remain clickable when the document is opened in a compatible PDF viewer.

Supported URI schemes are http, https, mailto, and tel. Other schemes and relative URLs are omitted from the exported PDF.

Grid Cell Hyperlinks Copy Link

Use processCellHyperlinkCallback to return the URI for an exported body cell. The callback receives the final exported text together with its row node and column.

this.gridApi.exportDataAsPdf({
    processCellHyperlinkCallback: (params) => {
        return params.column.getColId() === 'url' ? params.value : undefined;
    },
});

Adding a hyperlink does not change the appearance of the cell. Use cellStyle or processStyleCallback when linked text should use a different colour or other PDF styling.

Custom Content Hyperlinks Copy Link

Set PdfCellData.hyperlink when adding a link to prependContent, appendContent, or getCustomContentBelowRow:

this.gridApi.exportDataAsPdf({
    appendContent: [
        [
            {
                data: {
                    value: 'AG Grid Documentation',
                    hyperlink: 'https://www.ag-grid.com/documentation/',
                },
                style: {
                    color: '#358ccb',
                },
            },
        ],
    ],
});

The hyperlink is applied to each visible line of the exported cell text. When wrapped content continues onto another page, the corresponding link annotations are added to every page containing that text.

app.component.ts

import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  PdfExportParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";

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

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<div class="example-wrapper">
    <div class="controls">
      <button (click)="onBtExport()">Export to PDF</button>
    </div>
    <ag-grid-angular
      style="width: 100%; height: 100%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [defaultPdfExportParams]="defaultPdfExportParams"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
    />
  </div> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    { field: "company", headerName: "Company" },
    {
      field: "url",
      headerName: "Website",
      cellStyle: { color: "#358ccb" },
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 160,
  };
  defaultPdfExportParams: PdfExportParams = {
    columnWidth: ({ column }) => (column.getColId() === "url" ? 300 : 160),
    processCellHyperlinkCallback: (params) =>
      params.column.getColId() === "url" ? params.value : undefined,
    appendContent: [
      [
        {
          data: {
            value: "AG Grid Documentation",
            hyperlink: "https://www.ag-grid.com/documentation/",
          },
          mergeAcross: 1,
          style: {
            color: "#358ccb",
            alignment: "center",
            padding: 8,
          },
        },
      ],
    ],
  };
  rowData: any[] | null = [
    { company: "Google", url: "https://www.google.com" },
    { company: "Adobe", url: "https://www.adobe.com" },
    { company: "The New York Times", url: "https://www.nytimes.com" },
    { company: "GitHub", url: "https://github.com" },
    { company: "Microsoft", url: "https://www.microsoft.com" },
  ];

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

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}

styles.css

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

.controls {
    margin-bottom: 8px;
}

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

main.ts

import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});

API Copy Link

Export Options Copy Link

See below the functions on the PdfExportParams interface to customise exported grid values.

Function

Callback that provides an external URI for an exported body cell. The returned URI is added to the PDF as a clickable link annotation.

PdfCustomContent

Content to put at the top of the exported sheet.

PdfCustomContent

Content to put at the bottom of the exported sheet.

Function

A callback function to return content to be inserted below a row in the export.

PdfCellHyperlinkCallbackParams Copy Link

Properties available on the PdfCellHyperlinkCallbackParams<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.

PdfCellData Copy Link

Properties available on the PdfCellData interface.

string | null

The value of the cell.

string

External URI opened when the exported cell text is selected.

PdfImage

Image rendered alongside the cell value.

Getting Started

AI Features

Layout & Styling

Charting

Core Features