Including Async Data in Excel Export

[Jp Cabral]

Hi!, having an issue with the Grid Component. When exporting to excel Im generating a base64 string from an image url to be able to export images. However the fetch operation to get the image and resize is Asynchronous and it appears the default excel export function from syncfusio. So Im getting the following result for that column:  

data:image/png;base64,[object Promise]

So my question is this: is there a way to halt execution in order for the async function to finish when exporting. I tried making the ToolbarClick function async and awaited my base64 async function but got that results. Also tried in the excelQueryCellInfo function but no luck.

Here is the async function I'm trying to run before exporting:

export const imageUrlToBase64 = async (url: string) => {

  try {

    const imgUrl = url.replace('https://images', 'https://thumbnails')

    const response = await fetch(imgUrl)

    const aBuffer = await response.arrayBuffer()

    const buffer = Buffer.from(aBuffer)

    return buffer.toString('base64')

  } catch (error) {

    console.error('Error:', error)

  }

}

Please help

Thanks!

Jp 

[Johnson Soundararajan S]

Hi Jp Cabral,

Greetings from the Syncfusion support,

We observed that you wish to convert the image to base64 during Excel export. We have successfully fulfilled your requirement by converting the image to base64 in the toolbarClick event and setting the base64 format value in the excelQueryCellInfo event.

Please refer to the below sample and code snippet for more information.

Code sample :

Index.js
 

function toolbarClick(args: ClickEventArgs) {

  if (args.item.id === 'Grid_excelexport') {

    // Define a function to convert to data URL and return a Promise

    function convertToDataURL(url: string): Promise<string> {

      return new Promise((resolve, reject) => {

        toDataURL(url, function (dataUrl) {

          resolve(dataUrl); // Resolve the Promise with the dataUrl

        });

      });

    }

    // Call the function and handle the Promise

    convertToDataURL(

      'https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_400x400.jpeg'

    )

      .then((dataUrl) => {

        img = dataUrl;

        grid.excelExport();

      })

      .catch((error) => {

        console.error('Error:', error); // Handle any errors

      });

  }

}
 

function toDataURL(url, callback) {

  var xhr = new XMLHttpRequest();

  xhr.onload = function () {

    var reader = new FileReader();

    reader.onloadend = function () {

      callback(reader.result);

    };

    reader.readAsDataURL(xhr.response);

  };

  xhr.open('GET', url);

  xhr.responseType = 'blob';

  xhr.send();

}
 

function excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): any {

  if (args.column.headerText === 'Employee Image') {

    const splits = img.split(';base64,');

    const base64Data = splits[1];

    args.image = {

      base64: base64Data,

      height: 80,

      width: 80,

    };

  }

}

 

Sample : Xfazgj (forked) - StackBlitz

Please get back to us, if you need further assistance.

Regards,

Johnson Soundararajan S