PDF Export uses Value Getters and, by default, Value Formatters. Export callbacks can replace the resulting text without changing the values displayed in the grid.
Customising Cell and Row Group Values Copy Link
Use processCellCallback and processRowGroupCallback in defaultPdfExportParams to customise exported body cells and row groups.
<ag-grid-vue
:processCellCallback="processCellCallback"
:processRowGroupCallback="processRowGroupCallback"
/* other grid options ... */>
</ag-grid-vue>
this.processCellCallback = (params) => `_${params.value ?? ''}_`;
this.processRowGroupCallback = (params) => `row group: ${params.node.key ?? ''}`;See below the functions on the PdfExportParams interface to customise exported grid cell and row group values.
A callback function invoked once per cell in the grid. Return a string value to be displayed in the export. For example this is useful for formatting date values.
|
A callback function invoked once per row group. Return a string to be displayed in the group cell.
|
The following example adds the prefix row group: to row-group values and surrounds body-cell values with underscores in the exported PDF.
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PdfExportParams,
ProcessCellForExportParams,
ProcessRowGroupForExportParams,
enableDevValidations,
} from "ag-grid-community";
import {
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ContextMenuModule,
PdfExportModule,
RowGroupingModule,
]);
interface ResultData {
athlete: string;
country: string;
sport: string;
gold: number;
}
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="example-wrapper">
<button v-on:click="onBtExport()">Export to PDF</button>
<ag-grid-vue
style="width: 100%; height: 100%;"
@grid-ready="onGridReady"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:groupDefaultExpanded="groupDefaultExpanded"
:defaultPdfExportParams="defaultPdfExportParams"
:rowData="rowData"></ag-grid-vue>
</div>
</div>
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef<GridApi<ResultData> | null>(null);
const columnDefs = ref<ColDef[]>([
{ field: "athlete", minWidth: 180 },
{ field: "country", rowGroup: true, hide: true },
{ field: "sport", minWidth: 140 },
{ field: "gold" },
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const groupDefaultExpanded = ref(-1);
const defaultPdfExportParams = ref<PdfExportParams>({
processCellCallback(params: ProcessCellForExportParams): string {
return `_${params.value ?? ""}_`;
},
processRowGroupCallback(params: ProcessRowGroupForExportParams): string {
return `row group: ${params.node.key ?? ""}`;
},
});
const rowData = ref<ResultData[] | null>([
{
athlete: "Asha Patel",
country: "United Kingdom",
sport: "Rowing",
gold: 2,
},
{
athlete: "Noah Williams",
country: "United Kingdom",
sport: "Cycling",
gold: 1,
},
{ athlete: "Sofia Rossi", country: "Italy", sport: "Swimming", gold: 3 },
{ athlete: "Marco Bianchi", country: "Italy", sport: "Fencing", gold: 1 },
]);
function onBtExport() {
gridApi.value.exportDataAsPdf();
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
};
return {
gridApi,
columnDefs,
defaultColDef,
groupDefaultExpanded,
defaultPdfExportParams,
rowData,
onGridReady,
onBtExport,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
Customising Column Headers and Group Header Values Copy Link
Use processHeaderCallback and processGroupHeaderCallback to customise exported column headers and column-group headers.
<ag-grid-vue
:processHeaderCallback="processHeaderCallback"
:processGroupHeaderCallback="processGroupHeaderCallback"
/* other grid options ... */>
</ag-grid-vue>
this.processHeaderCallback = (params) => `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
this.processGroupHeaderCallback = (params) =>
`group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;See below the functions on the PdfExportParams interface to customise exported column group headers and headers.
A callback function invoked once per column. Return a string to be displayed in the column header.
|
A callback function invoked once per column group. Return a string to be displayed in the column group header. Note that column groups are exported by default, this option will not work with skipColumnGroupHeaders=true.
|
The following example prefixes exported headers with header: and exported group headers with group header: .
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
ColumnApiModule,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
PdfExportParams,
ProcessGroupHeaderForExportParams,
ProcessHeaderForExportParams,
enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, PdfExportModule } from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ColumnApiModule,
ContextMenuModule,
PdfExportModule,
]);
interface ResultData {
athlete: string;
country: string;
gold: number;
silver: number;
}
const VueExample = defineComponent({
template: `
<div style="height: 100%">
<div class="example-wrapper">
<button v-on:click="onBtExport()">Export to PDF</button>
<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<ResultData> | null>(null);
const columnDefs = ref<(ColDef | ColGroupDef)[]>([
{
headerName: "Athlete Details",
children: [
{ field: "athlete", minWidth: 180 },
{ field: "country", minWidth: 150 },
],
},
{
headerName: "Medal Results",
children: [{ field: "gold" }, { field: "silver" }],
},
]);
const defaultColDef = ref<ColDef>({
flex: 1,
minWidth: 100,
});
const defaultPdfExportParams = ref<PdfExportParams>({
processHeaderCallback(params: ProcessHeaderForExportParams): string {
return `header: ${params.api.getDisplayNameForColumn(params.column, null)}`;
},
processGroupHeaderCallback(
params: ProcessGroupHeaderForExportParams,
): string {
return `group header: ${params.api.getDisplayNameForColumnGroup(params.columnGroup, null)}`;
},
});
const rowData = ref<ResultData[] | null>([
{ athlete: "Asha Patel", country: "United Kingdom", gold: 2, silver: 1 },
{ athlete: "Sofia Rossi", country: "Italy", gold: 3, silver: 2 },
{ athlete: "Mei Chen", country: "Singapore", gold: 1, silver: 2 },
]);
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");
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
button {
align-self: flex-start;
margin-bottom: 8px;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
These callbacks return text. To style the processed result, use processStyleCallback; its value is the final exported string.