Importing/Exporting Files
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:
Step 1: Add Script References
Add a reference to the script files and CSS to proceed with import/export in SpreadJS.
// Add SpreadJS scripts and CSS
<script src="spreadjs/scripts/gc.spread.sheets.all.x.x.x.min.js"></script>
<script src="spreadjs/scripts/gc.spread.sheets.io.x.x.x.min.js"></script>
<script src="spreadjs/demos/spread/source/js/FileSaver.js"></script>
<link href="spreadjs/css/gc.spread.sheets.excel2013white.x.x.x.css" rel="stylesheet" />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.
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 orspread.import method to open or import the file into the spread.
// 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.
// 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 <div> element with the ID spreadjs_host which acts as a container for the spread control.
<body>
<input id = "selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />
<label for = "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>
<div id = "spreadjs_host" style = "width:100%; height:85vh; border:1px solid darkgray;"></div>
</body>The complete sample code for importing and exporting files from/to SpreadJS will now look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpreadJS SJSIO Sample</title>
<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.all.0.0.0.min.js"></script>
<script src="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/scripts/gc.spread.sheets.io.0.0.0.min.js"></script>
<script src="https://developer.mescius.com/spreadjs/demos/spread/source/js/FileSaver.js"></script>
<link href="https://developer.mescius.com/spreadjs/designer/lib/spreadjs/css/gc.spread.sheets.excel2013white.0.0.0.css" rel="stylesheet" />
<script>
window.onload = function () {
const spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadjs_host"));
const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
function getFileType(fileName) {
return fileName?.split(".").pop();
}
// 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");
}
}
// 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 });
}
}
document.getElementById('selectedFile').addEventListener("change", e => loadFile(e.target.files[0]));
document.getElementById('exportBtn').addEventListener("click", exportFile);
spread.getActiveSheet().setValue(0, 0, "Sample");
};
</script>
</head>
<body>
<input id = "selectedFile" type = "file" accept=".sjs, .xlsx, .ssjson" />
<label for = "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>
<div id = "spreadjs_host" style = "width:100%; height:85vh; border:1px solid darkgray;"></div>
</body>
</html>