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

# 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.

## 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.

```js
api.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`:

```js
api.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

```ts
import {
  CellStyleModule,
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  PdfExportModule,
} from "ag-grid-enterprise";

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

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  columnDefs: [
    { field: "company", headerName: "Company" },
    {
      field: "url",
      headerName: "Website",
      cellStyle: { color: "#358ccb" },
    },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 160,
  },
  defaultPdfExportParams: {
    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: [
    { 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" },
  ],
};

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

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, 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 Export - Hyperlinks](https://www.ag-grid.com/examples/pdf-export-hyperlinks/pdf-export-hyperlinks/typescript/)