[data grid] How to add a logo/picture to the customized export functionality

[mahammahmood]

Latest version

• I have tested the latest version

The problem in depth

In the DataGrid Premium, I want to customize the export functionality to include a logo in the first two rows

const exceljsPreProcess = ({ workbook, worksheet }: GridExceljsProcessInput) => { 
    workbook.creator = 'MUI-X team';
    workbook.created = new Date();  worksheet.mergeCells('A1:H2');   worksheet.addRow([]);  const imageId = workbook.addImage({
      filename: '.public/assets/logos/logo-fieldforce.png', // Update this path to your local image path
      extension: 'png',
    });
  worksheet.addImage(imageId, {
      tl: { col: 0, row: 0 }, // top-left corner of the image (0-based index)
      ext: { width: 300, height: 50 }, // width and height of the image in points
    });  };

This is the path of the image: './public/assets/logos/logo-fieldforce.png'.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data, Grid, Premium, GridToolbarExport, GridExceljsProcessInput
Order ID: 91010

[michelengelen]

According to the docs from excelJs this should be possible: https://github.com/exceljs/exceljs?tab=readme-ov-file#add-image-to-workbook

But this is an external dependency and out of our control, so please refer to the official docs! Thanks!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@mahammahmood: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.