# Importing/Exporting Files
A walkthrough showing how to import and export different files
## Content
The following section describes the steps to import and export files from/to SpreadJS.
In addition to SpreadJS API, the following methods are also used:
* [FileReader.readAsText()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText)
* [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
* [String.prototype.substr()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr)
* [String.prototype.lastIndexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf)
## Step 1: Add Script References
Add a reference to the script files and CSS to proceed with import/export in SpreadJS.
```javascript
// Add SpreadJS scripts and CSS
```
## Step 2: Initialize Spread
Use the `window.onload` function to initialize the SpreadJS and set up the file type mapping. Additionally, create `getFileType` function to determine the file type by splitting the file name and its extension.
```javascript
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadjs_host"));
const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
// Get the file types
function getFileType(fileName) {
return fileName?.split(".").pop();
}
};
```
## Step 3: Import File
Create `loadFile` function to import the selected file. It checks the file format and uses the `spread.open` or`spread.import` method to open or import the file into the spread.
```javascript
// Load files
function loadFile(file) {
const type = getFileType(file.name);
const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;
if (type === fileTypeMap.sjs) {
spread.open(file, () => console.log("SJS File Loaded"), console.error);
} else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
} else {
console.error("Unsupported file type");
}
}
```
## Step 4: Export File
Create `exportFile` function to manage the export process. It retrieves the selected export format and saves the spread in the selected format.
```javascript
// Export Files
function 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 === fileTypeMap.sjs) {
spread.save(blob => saveAs(blob, fileName), console.error);
} else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
}
}
```
## Step 5: Add HTML Input Elements
Create an input file element that allows users to choose files with the following extensions: .sjs, .xlsx, or .ssjson. Following that, create a dropdown labeled **File Type** where users can select .sjs (SJS), .xlsx (Excel), or .ssjson (SSJson) formats. Also, add a button labeled **Export** to trigger the export functionality. Additionally, create a \
element with the ID `spreadjs_host` which acts as a container for the spread control.
```html
```
The complete sample code for importing and exporting files from/to SpreadJS will now look like this:
```javascript
SpreadJS SJSIO Sample
```