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.
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:
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.
"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 "./styles.css";
import {
CellStyleModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
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();
}
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>,
);
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.controls {
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
API Copy Link
Export Options Copy Link
See below the functions on the PdfExportParams interface to customise exported grid values.
Callback that provides an external URI for an exported body cell. The returned URI is added to the PDF as a clickable link annotation.
|
Content to put at the top of the exported sheet.
|
Content to put at the bottom of the exported sheet.
|
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.
The final text exported for the cell. |
The 1-based index of the current exported row. |
The row node for the exported cell. |
The current column. |
The grid api. |
Application context as set on gridOptions.context. |
PdfCellData Copy Link
Properties available on the PdfCellData interface.
The value of the cell. |
External URI opened when the exported cell text is selected. |
Image rendered alongside the cell value. |