Spread-sheets-io Element

Using the spread-sheets-io element in SpreadJS with React, you can quickly render and display the Excel sheets on the webpages while 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/create-a-new-react-app.html
Install SpreadJS React modules in project
Install SpreadJS React modules in your project using the following command:
```
npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-react
```
Import SpreadJS CSS into index.js file
Import the SpreadJS CSS in your index.js file using the following code:
```
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
```
Install spread-sheets-io React Module and FileSaver React Module in the Project
Install the spread-sheets-io and file-saver modules in your project using the following commands:
```
npm install @mescius/spread-sheets-io
npm install file-saver --save
```

Use spread-sheets-io in React Application

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 the spread-sheets-io elements in a React application.

import React, { Component } from 'react';
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import * as GC from "@mescius/spread-sheets";
import saveAs from "file-saver";
import "@mescius/spread-sheets-io";

class APP extends Component {
  constructor(props) {
    super(props);
    this.spreadBackColor = 'aliceblue';
    this.sheetName = 'Goods List';
    this.hostStyle =
    {
      width: '800px',
      height: '600px'
    };

  }

  workbookInit = (spread) => {
    this.spread = spread

    document.getElementById('selectedFile').addEventListener("change", e => this.loadFile(e.target.files[0]));
    document.getElementById('exportBtn').addEventListener("click", this.exportFile);

  }

  fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
  getFileType = (fileName) => {
    return fileName.split(".").pop();
  }

    // Load Files
  loadFile = (file) => {
    console.log("hi")
    const type = this.getFileType(file.name);
    const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

    if (type === this.fileTypeMap.sjs) {
      this.open(file, () => console.log("SJS File Loaded"), console.error);
    } else if ([this.fileTypeMap.xlsx, this.fileTypeMap.ssjson].includes(type)) {
      this.spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
    } else {
      console.error("Unsupported file type");
    }
  }

  // Export Files
  exportFile = () => {
    const type = document.getElementById('exportFileType').value;
    const fileName = `export.${type}`;
    const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

    if (type === this.fileTypeMap.sjs) {
      this.spread.save(blob => saveAs(blob, fileName), console.error);
    } else if (type === this.fileTypeMap.xlsx || type === this.fileTypeMap.ssjson) {
      this.spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
    }
  }

  render() {
    return (
      <div>

        <input id="selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />

        <label htmlFor="exportFileType">File Type:</label>
        <select id="exportFileType">
          <option value="xlsx">Excel</option>
          <option value="ssjson">SSJson</option>
          <option value="sjs">SJS</option>
        </select>
        <button id="exportBtn">Export</button>

        <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
          <Worksheet name={this.sheetName} dataSource={this.data}>
            <Column dataField='Name' width={300}></Column>
            <Column dataField='Category' width={this.columnWidth}></Column>
            <Column dataField='Price' width={this.columnWidth}
              formatter="$#.00"></Column>
            <Column dataField='Shopping Place' width={this.columnWidth}></Column>
          </Worksheet>
        </SpreadSheets>
      </div>
    )
  }
}
export default APP