How to Import and Export CSV Files Using React

What You Will Need

• SpreadJS
• NPM
• Visual Studio Code

Controls Referenced

• SpreadJS

Tutorial Concept
Learn how to import and export CSV files into a spreadsheet using React and SpreadJS.

---

In the dynamic world of web development, React is a powerful framework that allows you to build user interfaces out of individual pieces called components. As React developers, we typically handle data in various formats, with the CSV format as a common requirement. Whether it's importing data from external sources, performing data analysis, or presenting information in a structured format, mastering CSV file manipulation is crucial. In this blog, we'll delve into handling CSV files using SpreadJS, a robust spreadsheet component for React. You'll learn how to import, visualize, and export CSV data seamlessly within a React application. Let's explore the capabilities of effortless CSV file management in React development.

Steps to Import and Export CSV Files in a React Spreadsheet Application

1. Add SpreadJS to a React App
2. Add Buttons for Import and Export
3. Import CSV Data to a React App Using SpreadJS’s setCsv Method
4. Export React Data to a CSV File Using SpreadJS’s getCsv Method

To follow along with this tutorial, you can download this sample.

Add SpreadJS to a React App

To start with this example, create a React app, reference SpreadJS' files, and initialize the JavaScript spreadsheet component. In this case, we can use NPM to install the required SpreadJS files:

    npm install @mescius/spread-sheets @mescius/spread-sheets-react

We can now add the component to our App.js file under the render() function of the class:

    class App extends React.Component {
    ...
      render() {
        return (
          <div>
            <SpreadSheets hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
            </SpreadSheets>
          </div>
        )
      }
    }

In that same file, we add all of the imports we will need above the class code:

    import React from 'react';
    import './App.css';
    import GC from '@mescius/spread-sheets';
    import '@mescius/spread-sheets-io';
    import { SpreadSheets } from '@mescius/spread-sheets-react';
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

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

After the imports, in the same file, we add a constructor to the class code and initialize a couple of variables:

    class App extends React.Component {
      constructor(props) {
        super(props);
        this.hostStyle =
        {
          border: '1px solid #ccc',
          width: '100%',
          height: '80vh'
        };
        this.spread = null;
      }
      ...
    }

After that, we add the initialization function for SpreadJS:

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

The SpreadJS instance appears as below:

Add Buttons for Import and Export

Next, we will add a couple of buttons and a file selector element to the App.js file in the render function. This is as simple as adding some input elements in the div:

    render() {
      return (
        <div>
          <input type="file" name="files[]" id="fileDemo" accept=".csv" />
          <input type="button" value="Import" onClick={this.importFile} />
          <input type="button" value="Export" onClick={this.exportFile} />
          <input type="text" id="exportFileName" placeholder="Export file name" value="export.csv" />
          <SpreadSheets hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
          </SpreadSheets>
        </div>
      )
    }

Import CSV Data to a React App Using SpreadJS’s setCsv Method

Now, we can add the functions connected to the elements we defined in the last section. To import CSV data to a React app, we will use the SpreadJS Workbook.import function:

    // Import Csv
    importFile = () => {
      var csvFile = document.getElementById("fileDemo").files[0];
      this.spread?.import(csvFile, function () {
        alert('Imported successfully');
      }, function () {
        alert('Import failed');
      }, {
        fileType: GC.Spread.Sheets.FileType.csv
      })
    }

Export React Data to a CSV File Using SpreadJS’s getCsv Method

Alternatively, to export CSV data, we need to use the Workbook.export function within the exportFile function. We can export the CSV and save it as a Blob type:

    // Export CSV
    exportFile = () => {
      let fileName = document.getElementById("exportFileName").value;
      if (fileName.substr(-4, 4) !== '.csv') {
        fileName += '.csv';
      }
      this.spread?.export(function (blob) {
        saveAs(blob, fileName);
      }, function () {
        alert('Export failed');
      }, {
        fileType: GC.Spread.Sheets.FileType.csv
      })
    }

That’s all that is needed to import and export CSV files with SpreadJS:

Conclusion

With a small amount of SpreadJS code, you can add CSV import and export functionality to your React app, providing your users the ability to load and save their data. For more information about SpreadJS and examples, check out our Demos and Documentation.