I used React CSV to implement export to CSV functionality in my webpart which worked well in local and site workbench, but when deployed into a site I got a weird blob redirection 404 not found error message.

https:///blob:/1a49b01c-ddb2-4c31-af1c-8ea3676be5d8 (404 not found)
Broke my head for 2days, luckily came through this brilliant demo by Aakash in community call
Solution/work around:
You will get this error when react-csv is used like this in webpart
<CSVLink data={csvData}>Download me</CSVLink>;
Instead use it with combination of Office UI react control, it worked fantastic in all browsers (IE, Chrome and Edge)
<CSVLink data={this.state.userRequests} filename={'Requests.csv'}>
<CommandBarButton iconProps={{ iconName: 'ExcelLogoInverse' }} text='Export to Excel' />
</CSVLink>
Finally, I was able to create a webpart with export to “CSV/Excel” option.
Step 1: Create a standard SPFx React webpart
Step 2: Install the dependency packages
Once the react webpart is created open the project in VS code and install these
Install React-csv for export to csv feature
npm i react-csv
npm install @types/react-csv
Install Office UI fabric control to add the Export to Excel icon button
npm install @pnp/spfx-controls-react --save --save-exact
Step 3: Add Import statements
Open the webpart “.tsx” file and add the below impart statements
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
import { DetailsList, DetailsListLayoutMode, IColumn, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import { CSVLink } from "react-csv";
import { SPHttpClient } from '@microsoft/sp-http';
Step 4: Add code logic to retrieve list items and Export to CSV control
In the “.tsx” file under default class add the below methods to retrieve SharePoint list using RESTAPI.
export default class Exportcsv extends React.Component<IExportcsvProps, IExportcsvState> {
private userRequests: IUserRequest[] = [];
constructor(props: IExportcsvProps) {
super(props);
this.state = {
userRequests: this.userRequests
};
}
public componentDidMount() {
const restApi = `${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('Requests')/items?$select=Title,Requestor,RequestDate,Location,Status`;
this.props.context.spHttpClient.get(restApi, SPHttpClient.configurations.v1)
.then(resp => { return resp.json(); })
.then(items => {
this.setState({userRequests: items.value});
});
}
public render(): React.ReactElement<IExportcsvProps> {
const columns: IColumn[] = [
{
key: 'column1',
name: 'Title',
fieldName: 'Title',
minWidth: 100,
maxWidth: 400,
isResizable: true
},
{
key: 'column2',
name: 'Requestor',
fieldName: 'Requestor',
minWidth: 100,
maxWidth: 400,
isResizable: true
},
{
key: 'column3',
name: 'Location',
fieldName: 'Location',
minWidth: 100,
maxWidth: 400,
isResizable: true
},
{
key: 'column4',
name: 'RequestDate',
fieldName: 'RequestDate',
minWidth: 100,
maxWidth: 400,
isResizable: true
},
{
key: 'column5',
name: 'Status',
fieldName: 'Status',
minWidth: 100,
maxWidth: 400,
isResizable: true
},
];
return (
<div className={ styles.exportcsv }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<CSVLink data={this.state.userRequests} filename={'Requests.csv'}>
<CommandBarButton iconProps={{ iconName: 'ExcelLogoInverse' }} text='Export to Excel' />
</CSVLink>
</div>
</div><br/>
<DetailsList
items={this.state.userRequests}
columns={columns}
isHeaderVisible={true}
setKey='set'
layoutMode={DetailsListLayoutMode.justified}
selectionMode={SelectionMode.none}
/>
</div>
</div>
);
}
}
Gulp build
Gulp bundle –ship
Gulp package-solution --ship
Find the full project code here GitHub.
Thanks for reading my blog. Sharingiscaring.