[urgent] generate excel using spfx code

Question

i created generic list using spfx and my requirement is how to generate excel using spfx implementation for necessary fields via code

Answer 1

Hi @sweetu ve
I will recommend you to use PnP library to reach your requirement. Here is the code for you to refer

import * as React from 'react';    
import styles from './ExportToExcel.module.scss';    
import { IExportToExcelProps } from './IExportToExcelProps';    
import { escape } from '@microsoft/sp-lodash-subset';    
import { sp } from "@pnp/sp";    
import "@pnp/sp/webs";      
import "@pnp/sp/lists";      
import "@pnp/sp/items";     
import * as XLSX from 'xlsx';    
import {saveAs}  from 'file-saver';    
    
export interface MYListProperties {        
  Title: string;      
  City :String;      
        
}        
interface IPnpstate {          
  MyListData:MYListProperties[];        
}     
const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';    
const fileExtension = '.xlsx';    
var Heading = [  ["Title","City"],];    
const saveExcel = (ListData) => {    
  if(ListData.length>0)    
  {    
  const ws = XLSX.utils.book_new();    
   // const ws = XLSX.utils.json_to_sheet(csvData,{header:["A","B","C","D","E","F","G"], skipHeader:false});    
   XLSX.utils.sheet_add_aoa(ws, Heading);    
   XLSX.utils.sheet_add_json(ws, ListData, { origin: 'A2', skipHeader: true });           
    const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };    
    const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });    
    const data = new Blob([excelBuffer], {type: fileType});    
    saveAs(data, 'Data' + fileExtension);    
  }    
}    
    
    
export default class ExportToExcel extends React.Component<IExportToExcelProps, {}> {    
  constructor(props: IExportToExcelProps, state: IPnpstate) {        
    super(props);        
    this.state = {        
      MyListData: []       
    };      
    this.Listdata=this.Listdata.bind(this);      
  }      
    public componentDidMount(){        
          
    }      
  private  Listdata=async ()=>{      
    //const items: MYListProperties[] = await sp.web.lists.getByTitle("ExportToExcelList").items.get();      
   // return items;      
    //console.log(items);      
    const items: MYListProperties[] = await sp.web.lists.getByTitle("ExportToExcelList").items.get().then((response: MYListProperties[]) => {      
    let result: MYListProperties[] = [];      
      //alert(response.length);    
      response.forEach(element => {      
        result.push({      
       Title: element.Title, City: element.City      
        });      
        });     
            
       // this.setState({ MyListData: result });    
        //alert(result.length);    
        saveExcel(result);    
        return items;      
      });     
              
           
      
  }    
  public render(): React.ReactElement<IExportToExcelProps> {    
    return (    
      <div >      
        <button type='button' onClick={this.Listdata}>Export to Excel</button>            
          
      </div>      
    );    
  }    
}    

For more details please refer to the following article
https://www.c-sharpcorner.com/article/export-sharepoint-list-items-in-excel-spfx-using-react-filesaver-js-xlsx-js/

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---