This section describes how to insert hyperlinks in the cells of the exported Excel file.
Exporting Formulas Copy Link
You can insert hyperlinks in the cells of the exported Excel file by outputting an Excel formula containing a Hyperlink function with a URL value you provide. The code below inserts hyperlinks in the Excel export file for all values in the URL column.
const gridOptions = {
columnDefs: [
{ field: 'company' },
{
field: 'url',
cellClass: 'hyperlinks' // references excel style
}
],
defaultExcelExportParams: {
autoConvertFormulas: true,
processCellCallback: params => {
const field = params.column.getColDef().field;
return field === 'url' ? `=HYPERLINK("${params.value}")` : params.value;
}
},
excelStyles: [
{
id: 'hyperlinks',
font: {
underline: 'Single',
color: '#358ccb'
}
}
],
// other grid options ...
}Note the following:
- The URL column of the grid below has URL values.
- In the exported Excel file, the URL column has active links for these URL values.
import {
CellStyleModule,
ClientSideRowModelModule,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import {
ColumnMenuModule,
ContextMenuModule,
ExcelExportModule,
} from "ag-grid-enterprise";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
CellStyleModule,
ClientSideRowModelModule,
ExcelExportModule,
ColumnMenuModule,
ContextMenuModule,
]);
let gridApi: GridApi;
const gridOptions: GridOptions = {
columnDefs: [{ field: "company" }, { field: "url", cellClass: "hyperlinks" }],
defaultColDef: {
flex: 1,
minWidth: 100,
},
defaultExcelExportParams: {
autoConvertFormulas: true,
processCellCallback: (params) => {
const field = params.column.getColDef().field;
return field === "url" ? `=HYPERLINK("${params.value}")` : params.value;
},
},
excelStyles: [
{
id: "hyperlinks",
font: {
underline: "Single",
color: "#358ccb",
},
},
],
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: "Twitter", url: "https://www.twitter.com" },
{ company: "StackOverflow", url: "https://stackoverflow.com/" },
{ company: "Reddit", url: "https://www.reddit.com" },
{ company: "GitHub", url: "https://www.github.com" },
{ company: "Microsoft", url: "https://www.microsoft.com" },
{ company: "Gizmodo", url: "https://www.gizmodo.com" },
{ company: "LinkedIN", url: "https://www.linkedin.com" },
],
};
function onBtExport() {
gridApi!.exportDataAsExcel();
}
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;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.grid-wrapper {
display: flex;
flex: 1 1 0;
}
.grid-wrapper > div {
width: 100%;
height: 100%;
}
<div class="container">
<div>
<button onclick="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
</div>
<div class="grid-wrapper">
<div id="myGrid"></div>
</div>
</div>