@progress/kendo-spreadsheet-react-wrapper/docs/import-export.md

Kendo UI Spreadsheet wrapper for React

---
title: Import and Export
page_title: Import and Export - Spreadsheet - Kendo UI for React
description: "Import and export the Kendo UI Spreadsheet wrapper for React."
slug: import_and_export_spreadsheet
position: 2
---

# Import and Export

The Spreadsheet enables you to [store its data as JSON](#toc-storing-data-as-json) and [export its data to Excel](#toc-exporting-data-to-excel).

## Storing Data as JSON

The Spreadsheet allows you to store and load data in a native JSON format.

### Basic Concepts

The format follows the same structure as the [widget configuration](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet) and is designed to be used both for direct storage and as an [intermediate format](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/import-and-export-data/server-side-processing).

The information that is persisted includes:

* Cell formulas, values, formatting and styling.
* Row height and column width.
* Sorting and filtering options.
* Active sheet and selection.

### Using the Serialization API

The Spreadsheet client-side API includes the [`fromJSON`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#methods-fromJSON) and [`toJSON`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#methods-toJSON) methods for loading and storing its state. To load the Spreadsheet with data, pass an object tat matches the required schema to `fromJSON`. This approach resets the component and clears all existing data.

The following example demonstrates how to load data by using `fromJSON`.

{% meta height:670 %}
```jsx-preview
class SpreadsheetContainer extends React.Component {

    constructor(props) {
            super(props);
            this.loadJSON = this.loadJSON.bind(this);
    }

    componentDidMount() {
        window.JSZip = jszip.default
    }

    loadJSON = (e) => {
         let spreadsheet = $("[data-role='spreadsheet']").getKendoSpreadsheet();
         spreadsheet.fromJSON({
            sheets: [{
                name: "Food Order",
                mergedCells: [
                    "A1:G1"
                ],
                rows: [{
                    height: 70,
                    cells: [{
                        value: "My Company", fontSize: 32, textAlign: "center"
                    }]
                }]
            }]
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.loadJSON} className={"k-button"}>Load data from JSON</button>
                <br/>
                <Spreadsheet/>
            </div>
        );
     }
    }
ReactDOM.render(
    <SpreadsheetContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Exporting Data to Excel

The Spreadsheet utilizes the [Excel export module](https://docs.telerik.com/kendo-ui/framework/excel/introduction) framework to produce Excel files directly in the browser. The output files are in the OOXML Spreadsheet format with an `.xlsx` extension. The legacy `.xls` binary format is not supported.

### Basic Concepts

The default configuration of the Spreadsheet toolbar includes an **Export** button. Clicking it opens a dialog box for entering the file name and for selecting the desired output format for the exported document. For more details, refer to the [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/import-and-export-data/export-to-excel)

### Using the Export API

The Spreadsheet client-side API includes the [`saveAsExcel`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet#methods-saveAsExcel) method for initiating the export trough JavaScript. While the method does not require you to specify a file name, it sets the value in [`excel.fileName`](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/configuration/excel#excel.fileName).

## Suggested Links

* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)