Export excel/csv not working in SPFx with ag-grid

Question

I'm using ag-grid react for SPFx in SharePoint.

When I try to export file in workbench it's working fine. But when I'm deploying sppkg package in sharepoint then export is not working. Blob URL is replacing SPFx page and showing 404 not found -

https://mytenant.sharepoint.com/sites/mysite/blob:/12012f34-cfb2-45a0-b8dd-539d39272848

Investigating this issue only difference I found when in workbench then the download is happening with the following code -

element.dispatchEvent(new MouseEvent('click', {
                bubbles: false,
                cancelable: true,
                view: window
}));

Where as in deployed version of code it does not work.

Any help will be much appreciated.

Thanks in advance!

Answer 1

I viewed the doc of ag-grid react and have below demo, it works fine on my SPO page.

• https://github.com/kongmengfei/SharedSPFx/blob/main/aggridreact/src/webparts/aggridreact/components/Aggridreact.tsx

Excel Export is only available in ag-Grid Enterprise(you need a license to use):

• https://www.ag-grid.com/documentation/javascript/licensing/

BR

Answer 2

It Might be late but I ran into the same issue with AG-Grid export in SPFX. Export works fine in Workbench but fails after deployment even if I am using full licensed version of Ag-Grid.

It is not a AG-Grid Issue but really the way SPFX handles the export functionality.

Try This:

Instead of using the function exportDataAsExcel(), use getDataAsExcel() to get the excel data from AG Grid API as a BLOB.

This code is in React. You can replicate the same in JS or Angular version of Ag-Grid

let blob = this.gridApi.getDataAsExcel();
const fileDownloadUrl = URL.createObjectURL(blob);
let link = document.createElement('a');
link.href = fileDownloadUrl;
link.download = fileName;
link.style.visibility = 'hidden';
// Followingline of code fixes the export issue in SPFX. The data interception needs to be set to false. You can research more on url interception in SPFX 
link.dataset.interception = 'off'; 
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(fileDownloadUrl);
document.body.removeChild(link);