JavaScript Data Grid: Excel Export - Images

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.

Exporting Images

You can export an image for any grid cell using the addImageToCell callback in the export parameters shown below:

const gridOptions = {
    defaultExcelExportParams: {
        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
                    }
                };
            }
        }
    },

    // other grid options ...
}

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.

Cells with Images

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:

• The image gets a margin within the cell because of the offsetX and offsetY properties in the ExcelImage.

// Loading...

Cells with Images and Text

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:

• The image gets a margin within the cell because of the offsetX and offsetY properties in the ExcelImage.
• This example returns the image and a value. The value is rendered within the same cell as the image.
• Excel Styles are used to indent the text and vertically align it with the image.

// Loading...

Prepend Images

This example uses the prepend content to add a custom logo to the export.

Note the following:

• The first row has a larger height as set in the rowHeight callback.
• The custom content added using prependContent spans across two columns.

// Loading...

Interface

addImageToCell = (
    params: AddImageToCellParams
) => AddImageToCell;

interface AddImageToCellParams {
  rowIndex: number;
  column: Column;
  value: string;
}

interface AddImageToCell {
  image: ExcelImage;
  value: string;
}

ExcelImage

Next Up

Continue to the next section: Multiple Sheets.