Using the Excel IO Element

Using the Excel IO element in SpreadJS with React, you can quickly render and display the excel sheets on the webpages while also executing the import and export operations without any hassle.

Create a React Project

Open the Command Prompt window and type the following commands:

npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start

After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project, refer to https://reactjs.org/docs/add-react-to-a-new-app.html

Install SpreadJS React module in project
Next, you need to install @grapecity/spread-sheets-react in your project using the following command:

npm install @grapecity/spread-sheets-react
Import SpreadJS CSS into index.js file
Next, you need to import the SpreadJS CSS in your index.js file using the following code:

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
Install Excel IO React Module and FileSaver React Module in the Project
Next, you need to install the Excel I/O and file-saver modules in your project using the following commands:

npm install @grapecity/spread-excelio
npm install file-saver --save

Use Excel IO in React Application

Now, you can modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

This example shows how to use Excel IO elements in a React Application.

JavaScript	Copy Code
import React from 'react'; import './App.css'; import GC from '@grapecity/spread-sheets'; import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'; // Import ExcelIO module import * as spreadExcel from '@grapecity/spread-excelio'; // Import file-saver module import saveAs from 'file-saver'; var SpreadJSKey = "xxx"; GC.Spread.Sheets.LicenseKey = SpreadJSKey; // You need to license the ExcelIO module separately using the same license key spreadExcel.LicenseKey = SpreadJSKey; class App extends React.Component { constructor(props) { super(props); this.hostStyle = { width: '1100px', height: '800px' }; } // Handling workbook initialized event workbookInit = (spread) => { this.setState({ spread: spread }); } // Import Excel importFile = () => { var excelFile = document.getElementById("fileDemo").files[0]; // Get an instance of IO class let excelIO = new spreadExcel.IO(); excelIO.open(excelFile, (json) => { this.state.spread.fromJSON(json); }, (e) => { console.log(e); }); } // Export Excel exportFile = () => { // Get an instance of IO class let excelIO = new spreadExcel.IO(); let fileName = document.getElementById("exportFileName").value; if (fileName.substr(-5, 5) !== '.xlsx') { fileName += '.xlsx'; } var json = JSON.stringify(this.state.spread.toJSON()); excelIO.save(json, (blob) => { saveAs(blob, fileName); }, (e) => { console.log(e); }); } render() { return ( <div> <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" /> <input type="button" id="loadExcel" value="Import" onClick={this.importFile} /> <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} /> <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" /> <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}> <Worksheet> </Worksheet> </SpreadSheets> </div> ) } } export default App;

JavaScript

Copy Code

import React from 'react';
import './App.css';
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

// Import ExcelIO module
import * as spreadExcel from '@grapecity/spread-excelio';

// Import file-saver module
import saveAs from 'file-saver';

var SpreadJSKey = "xxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

// You need to license the ExcelIO module separately using the same license key
spreadExcel.LicenseKey = SpreadJSKey;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.hostStyle =
            {
                width: '1100px',
                height: '800px'
            };
    }

// Handling workbook initialized event
    workbookInit = (spread) => {
        this.setState({
            spread: spread
        });
    }

// Import Excel
importFile = () => {
var excelFile = document.getElementById("fileDemo").files[0];

        // Get an instance of IO class
        let excelIO = new spreadExcel.IO();
        excelIO.open(excelFile, (json) => {
            this.state.spread.fromJSON(json);
        }, (e) => {
            console.log(e);
        });
    }

// Export Excel

exportFile = () => {

        // Get an instance of IO class
        let excelIO = new spreadExcel.IO();
        let fileName = document.getElementById("exportFileName").value;
        if (fileName.substr(-5, 5) !== '.xlsx') {
            fileName += '.xlsx';
        }
        var json = JSON.stringify(this.state.spread.toJSON());
        excelIO.save(json, (blob) => {
            saveAs(blob, fileName);
        }, (e) => {
            console.log(e);
        });

    }
    render() {
        return (
            <div>
                <input type="file" name="files[]" id="fileDemo" accept=".xlsx,.xls" />
                <input type="button" id="loadExcel" value="Import" onClick={this.importFile} />
                <input type="button" id="saveExcel" value="Export" onClick={this.exportFile} />
                <input type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
                <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
                    <Worksheet>
                    </Worksheet>
                </SpreadSheets>
            </div>
        )
    }
}
export default App;