---
product: "AG Grid"
title: "PDF Export - Hyperlinks"
description: "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."
enterprise: true
framework: react
version: "36.3.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-columns/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.3.0/react-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# PDF Export - Hyperlinks

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

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.

```jsx
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

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

```jsx
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.

#### PDF Export - Hyperlinks

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PdfExportParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";
import "./styles.css";

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

const modules = [
  CellStyleModule,
  ClientSideRowModelModule,
  PdfExportModule,
  ColumnMenuModule,
  ContextMenuModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<any[]>([
    { 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" },
  ]);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "company", headerName: "Company" },
    {
      field: "url",
      headerName: "Website",
      cellStyle: { color: "#358ccb" },
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 160,
    };
  }, []);
  const defaultPdfExportParams = useMemo<PdfExportParams>(() => {
    return {
      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,
            },
          },
        ],
      ],
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsPdf();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="controls">
            <button onClick={onBtExport}>Export to PDF</button>
          </div>

          <div style={gridStyle}>
            <AgGridReact
              ref={gridRef}
              rowData={rowData}
              columnDefs={columnDefs}
              defaultColDef={defaultColDef}
              defaultPdfExportParams={defaultPdfExportParams}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

[Live example: PDF Export - Hyperlinks](https://www.ag-grid.com/archive/36.3.0/examples/pdf-export-hyperlinks/pdf-export-hyperlinks/reactFunctionalTs/)

## API

### Export Options

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processCellHyperlinkCallback` | `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. |
| `prependContent` | `PdfCustomContent` |  |  | Content to put at the top of the exported sheet. |
| `appendContent` | `PdfCustomContent` |  |  | Content to put at the bottom of the exported sheet. |
| `getCustomContentBelowRow` | `Function` |  |  | A callback function to return content to be inserted below a row in the export. |

### PdfCellHyperlinkCallbackParams

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` |  |  | The final text exported for the cell. |
| `accumulatedRowIndex` | `number` |  |  | The 1-based index of the current exported row. |
| `node` | [`IRowNode`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/row-object/) |  |  | The row node for the exported cell. |
| `column` | [`Column`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/column-object/) |  |  | The current column. |
| `api` | [`GridApi`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/archive/36.3.0/react-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

### PdfCellData

Properties available on the `PdfCellData` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string \| null` | Yes |  | The value of the cell. |
| `hyperlink` | `string` |  |  | External URI opened when the exported cell text is selected. |
| `image` | `PdfImage` |  |  | Image rendered alongside the cell value. |