---
title: "Excel Export - Hyperlinks"
enterprise: true
framework: vue
version: "36.1.0"
---

# Excel Export - Hyperlinks

This section describes how to insert hyperlinks in the cells of the exported Excel file.

## Exporting Formulas

You can insert `hyperlinks` in the cells of the exported Excel file by outputting an Excel formula containing a [Hyperlink function](https://support.microsoft.com/en-us/office/hyperlink-function-333c7ce6-c5ae-4164-9c47-7de9b76f577f) with a URL value you provide. The code below inserts hyperlinks in the Excel export file for all values in the URL column.

```ts
<ag-grid-vue
    :columnDefs="columnDefs"
    :defaultExcelExportParams="defaultExcelExportParams"
    :excelStyles="excelStyles"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'company' },
    {
        field: 'url',
        cellClass: 'hyperlinks' // references excel style
    }
];
this.defaultExcelExportParams = {
    autoConvertFormulas: true,
    processCellCallback: params => {
        const field = params.column.getColDef().field;
        return field === 'url' ? `=HYPERLINK("${params.value}")` : params.value;
    }
};
this.excelStyles = [
    {
        id: 'hyperlinks',
        font: {
            underline: 'Single',
            color: '#358ccb'
        }
    }
];
```

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.

#### Excel 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,
  ExcelExportParams,
  ExcelStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div>
        <button v-on:click="onBtExport()" style="margin-bottom: 5px; font-weight: bold">Export to Excel</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"
          :excelStyles="excelStyles"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "company" },
      { field: "url", cellClass: "hyperlinks" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      autoConvertFormulas: true,
      processCellCallback: (params) => {
        const field = params.column.getColDef().field;
        return field === "url" ? `=HYPERLINK("${params.value}")` : params.value;
      },
    });
    const excelStyles = ref<ExcelStyle[]>([
      {
        id: "hyperlinks",
        font: {
          underline: "Single",
          color: "#358ccb",
        },
      },
    ]);
    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: "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.value!.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

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

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

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