Excel Export allows including images in the Excel export file. For example, you can add your company logo to the top or bottom of the exported Excel spreadsheet, or export any images you're displaying inside grid cells.
You can export an image for any grid cell using the addImageToCell callback in the export parameters shown below:
const [defaultExcelExportParams, setDefaultExcelExportParams] = useMemo(() => {
return {
addImageToCell: (rowIndex, column, value) => {
if (rowIndex === 1 && column.colId === 'athlete') {
const myCompanyLogo = getBase64Image('logo.png');
return {
image: {
id: 'company_logo',
base64: myCompanyLogo,
imageType: 'png',
fitCell: true
}
};
}
}
};
}, []);
<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
It's important to note that images can only be exported as base64
strings, and the image format must be either PNG
, GIF
or JPG
. You can convert your images to a base64
string, using third party tools, or using the code in our examples on this page.
Every image is required to have an id
. This way, if you're exporting the same image multiple times as part of the same export operation, the id
will be used to access the image data, so the image file is imported only once.
At the moment, it's only possible to export one image per cell.
The example below includes a Custom Cell Renderer and uses the addImageToCell
callback to convert the cell value into a base64
image.
Note the following:
offsetX
and offsetY
properties in the ExcelImage
.This example has a Custom Cell Renderer showing an image together with text, and uses the addImageToCell
to convert the cell value into a base64
image.
Note the following:
offsetX
and offsetY
properties in the ExcelImage
.This example uses the prepend content to add a custom logo to the export.
Note the following:
rowHeight
callback.prependContent
spans across two columns.Even if an ExcelCell object that merges multiple cells across is created, the ExcelImage
still needs be informed of how many columns it will be spanning. This is done by passing position: { colSpan: number }
to the ExcelImage
.
Continue to the next section: Multiple Sheets.