---
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: vue
version: "36.2.0"
related:
    - title: "Styles"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-styles/"
    - title: "Languages"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-languages/"
    - title: "Extra Content"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-extra-content/"
    - title: "Customising Content"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-customising-content/"
    - title: "Images"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-images/"
    - title: "Watermarks"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-watermarks/"
    - title: "Rows"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-rows/"
    - title: "Columns"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-columns/"
    - title: "Master Detail"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-master-detail/"
    - title: "Page Setup"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-page-setup/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/vue-data-grid/pdf-export-api/"
llms: "https://www.ag-grid.com/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.

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

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

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

#### PDF Export - Hyperlinks

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
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,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="controls">
        <button v-on:click="onBtExport()">Export to PDF</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :defaultPdfExportParams="defaultPdfExportParams"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "company", headerName: "Company" },
      {
        field: "url",
        headerName: "Website",
        cellStyle: { color: "#358ccb" },
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 160,
    });
    const defaultPdfExportParams = ref<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,
            },
          },
        ],
      ],
    });
    const rowData = ref<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" },
    ]);

    function onBtExport() {
      gridApi.value.exportDataAsPdf();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      defaultPdfExportParams,
      rowData,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## API

### Export Options

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

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `processCellHyperlinkCallback` | `Function` |  |  |  |
| `prependContent` | `PdfCustomContent` |  |  |  |
| `appendContent` | `PdfCustomContent` |  |  |  |
| `getCustomContentBelowRow` | `Function` |  |  |  |

### PdfCellHyperlinkCallbackParams

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

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

### PdfCellData

Properties available on the `PdfCellData` interface.

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