In order to use the SpreadJS File Format feature, you need to add the related js file link into the document's head section below the Spread link. For example:
SpreadJS supports opening and saving sjs file formats. It also supports importing and exporting xlsx, ssjson, and csv file formats.
For example:
class GC.Spread.Sheets.Workbook
GC.Spread.Sheets.SaveOptions
GC.Spread.Sheets.OpenOptions
GC.Spread.Sheets.ImportOptions
GC.Spread.Sheets.ExportOptions
GC.Spread.Sheets.ImportXlsxOptions
GC.Spread.Sheets.ExportXlsxOptions
GC.Spread.Sheets.ImportCsvOptions
.Spread.Sheets.ExportCsvOptions
GC.Spread.Sheets.ImportSSJsonOptions
GC.Spread.Sheets.ExportSSJsonOptions
var openOptions = [
{ propName: "openMode", type: "select", displayText: "OpenMode", options: [{name: 'normal', value: 0}, {name: 'lazy', value: 1}, {name: 'incremental', value: 2}], default: 0 },
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "fullRecalc", type: "boolean", default: false },
{ propName: "dynamicReferences", type: "boolean", default: true },
{ propName: "calcOnDemand", type: "boolean", default: false },
{ propName: "includeUnusedStyles", type: "boolean", default: true },
];
var importXlsxOptions = [
{ propName: "openMode", type: "select", displayText: "OpenMode", options: [{name: 'normal', value: 0}, {name: 'lazy', value: 1}, {name: 'incremental', value: 2}], default: 0 },
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "frozenColumnsAsRowHeaders", type: "boolean", default: false },
{ propName: "frozenRowsAsColumnHeaders", type: "boolean", default: false },
{ propName: "fullRecalc", type: "boolean", default: false },
{ propName: "dynamicReferences", type: "boolean", default: true },
{ propName: "calcOnDemand", type: "boolean", default: false },
{ propName: "includeUnusedStyles", type: "boolean", default: true },
];
var importSSJsonOptions = [
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "frozenColumnsAsRowHeaders", type: "boolean", default: false },
{ propName: "frozenRowsAsColumnHeaders", type: "boolean", default: false },
{ propName: "fullRecalc", type: "boolean", default: false },
{ propName: "incrementalLoading", type: "boolean", default: false }
];
var importCsvOptions = [
{ propName: "encoding", type: "string", default: "UTF-8" },
{ propName: "rowDelimiter", type: "string", default: "\r\n" },
{ propName: "columnDelimiter", type: "string", default: "," }
];
var saveOptions = [
{ propName: "includeBindingSource", type: "boolean", default: false },
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "saveAsView", type: "boolean", default: false },
{ propName: "includeAutoMergedCells", type: "boolean", default: false },
{ propName: "includeCalcModelCache", type: "boolean", default: false },
{ propName: "saveR1C1Formula", type: "boolean", default: false },
{ propName: "includeUnusedNames", type: "boolean", default: true },
{ propName: "includeEmptyRegionCells", type: "boolean", default: true },
];
var exportXlsxOptions = [
{ propName: "includeBindingSource", type: "boolean", default: false },
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "saveAsView", type: "boolean", default: false },
{ propName: "rowHeadersAsFrozenColumns", type: "boolean", default: false },
{ propName: "columnHeadersAsFrozenRows", type: "boolean", default: false },
{ propName: "includeAutoMergedCells", type: "boolean", default: false },
{ propName: "includeUnusedNames", type: "boolean", default: true },
{ propName: "includeEmptyRegionCells", type: "boolean", default: true },
];
var exportSSJsonOptions = [
{ propName: "includeBindingSource", type: "boolean", default: false },
{ propName: "includeStyles", type: "boolean", default: true },
{ propName: "includeFormulas", type: "boolean", default: true },
{ propName: "saveAsView", type: "boolean", default: false },
{ propName: "rowHeadersAsFrozenColumns", type: "boolean", default: false },
{ propName: "columnHeadersAsFrozenRows", type: "boolean", default: false },
{ propName: "includeAutoMergedCells", type: "boolean", default: false },
];
var exportCsvOptions = [
{ propName: "encoding", type: "string", default: "UTF-8" },
{ propName: "rowDelimiter", type: "string", default: "\r\n" },
{ propName: "columnDelimiter", type: "string", default: "," },
{ propName: "sheetIndex", type: "number", default: 0 },
{ propName: "row", type: "number", default: 0 },
{ propName: "column", type: "number", default: 0 },
{ propName: "rowCount", type: "number", default: 200 },
{ propName: "columnCount", type: "number", default: 20 },
];
var FileType = {
SJS: 'sjs',
Excel: 'xlsx',
SSJson: 'ssjson',
Csv: 'csv',
}
var openOptionsDict = {};
openOptionsDict[FileType.SJS] = openOptions;
openOptionsDict[FileType.Excel] = importXlsxOptions;
openOptionsDict[FileType.SSJson] = importSSJsonOptions;
openOptionsDict[FileType.Csv] = importCsvOptions;
var saveOptionsDict = {};
saveOptionsDict[FileType.SJS] = saveOptions;
saveOptionsDict[FileType.Excel] = exportXlsxOptions;
saveOptionsDict[FileType.SSJson] = exportSSJsonOptions;
saveOptionsDict[FileType.Csv] = exportCsvOptions;
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
initDefaultOptions();
var selectedFileElement = document.querySelector('#selectedFile');
selectedFileElement.addEventListener("change", function() {
var file = selectedFileElement.files[0];
updateOptions('open', getFileType(file));
});
var saveFileType = document.querySelector('#saveFileType');
saveFileType.addEventListener("change", function() {
var fileType = saveFileType.value;
updateOptions('save', fileType);
});
document.getElementById('open').onclick = function () {
var file = document.querySelector('#selectedFile').files[0];
if (!file) {
return;
}
var fileType = getFileType(file);
var options = getOptions('open');
if (fileType === FileType.SJS) {
spread.open(file, function() {}, function() {}, options);
} else {
spread.import(file, function() {}, function() {}, options);
}
};
document.getElementById('save').onclick = function () {
var fileName = 'export.' + saveFileType.value;
var fileType = saveFileType.value;
var options = getOptions('save');
if (fileType === FileType.SJS) {
spread.save(function(blob) { saveAs(blob, fileName); }, function() {}, options);
} else {
options.fileType = mapExportFileType(fileType);
spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, options);
}
};
};
function initOptions (options, fileType, mode) {
var container = document.createElement('div');
container.className = fileType;
container.style.display = 'none';
options.forEach(function (prop) {
var item = document.createElement('div');
item.className = 'item';
var id = getElementId(mode, fileType, prop.propName);
var label = document.createElement("label");
label.innerText = prop.displayText || prop.propName;
label.for = id;
if (prop.type === 'select') {
var select = document.createElement('select');
prop.options.forEach(function(p) {
var option = document.createElement('option');
option.value = p.value;
option.text = p.name;
select.appendChild(option);
});
select.id = id;
select.value = prop.default;
item.appendChild(label);
item.appendChild(select);
} else {
var input = document.createElement('input');
input.id = getElementId(mode, fileType, prop.propName);
if (prop.type === 'boolean') {
input.type ='checkbox';
input.checked = prop.default;
item.appendChild(input);
item.appendChild(label);
} else if (prop.type === 'number') {
input.type = 'number';
input.value = prop.default;
item.appendChild(label);
item.appendChild(input);
} else if (prop.type === 'string') {
input.type = 'text';
input.value = prop.default;
item.appendChild(label);
item.appendChild(input);
}
}
container.appendChild(item);
});
return container;
}
function initDefaultOptions () {
var container = document.querySelector('.open-options');
var mode = 'open';
container.appendChild(initOptions(openOptions, FileType.SJS, mode));
container.appendChild(initOptions(importXlsxOptions, FileType.Excel, mode));
container.appendChild(initOptions(importSSJsonOptions, FileType.SSJson, mode));
container.appendChild(initOptions(importCsvOptions, FileType.Csv, mode));
container = document.querySelector('.save-options');
mode = 'save';
container.appendChild(initOptions(saveOptions, FileType.SJS, mode));
container.appendChild(initOptions(exportXlsxOptions, FileType.Excel, mode));
container.appendChild(initOptions(exportSSJsonOptions, FileType.SSJson, mode));
container.appendChild(initOptions(exportCsvOptions, FileType.Csv, mode));
updateOptions('save', FileType.SJS);
}
function updateOptions (mode, fileType) {
var container = document.querySelector('.' + mode + '-options');
var oldFileType = container.getAttribute('data-file-type');
if (oldFileType === fileType) {
return;
}
if (oldFileType) {
container.querySelector('.' + oldFileType).style.display = 'none';
}
if (fileType) {
container.querySelector('.' + fileType).style.display = '';
}
container.setAttribute('data-file-type', fileType);
}
function getOptions (mode) {
var container = document.querySelector('.' + mode + '-options');
var fileType = container.getAttribute('data-file-type');
if (!fileType) {
return;
}
var options = {};
var props = mode === 'open' ? openOptionsDict[fileType] : saveOptionsDict[fileType];
container = container.querySelector('.' + fileType);
props.forEach(function(prop) {
var element = container.querySelector('#' + getElementId(mode, fileType, prop.propName));
var value;
if (prop.type === 'boolean') {
value = element.checked;
} else if (prop.type === 'number') {
value = +element.value;
} else if (prop.type === 'string') {
value = element.value;
} else if (prop.type === 'select') {
value = +element.value;
}
options[prop.propName] = value;
});
return options;
}
function getElementId (mode, fileType, propName) {
return mode + '-' + fileType + '-' + propName;
}
function getFileType (file) {
if (!file) {
return;
}
var fileName = file.name;
var extensionName = fileName.substring(fileName.lastIndexOf(".") + 1);
if (extensionName === 'sjs') {
return FileType.SJS;
} else if (extensionName === 'xlsx' || extensionName === 'xlsm') {
return FileType.Excel;
} else if (extensionName === 'ssjson' || extensionName === 'json') {
return FileType.SSJson;
} else if (extensionName === 'csv') {
return FileType.Csv;
}
}
function mapExportFileType (fileType) {
if (fileType === FileType.SSJson) {
return GC.Spread.Sheets.FileType.ssjson;
} else if (fileType === FileType.Csv) {
return GC.Spread.Sheets.FileType.csv;
}
return GC.Spread.Sheets.FileType.excel;
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div class="sample-container">
<div id="ss" class="sample-spreadsheets"></div>
<div id="statusBar"></div>
</div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input id="selectedFile" type="file" name="files[]"accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" />
<button class="settingButton" id="open">Open</button>
<div class="open-options"></div>
</div>
<div class="inputContainer">
<label for="fileType">FileType:</label>
<select id="saveFileType">
<option value="sjs">SJS</option>
<option value="xlsx">Excel</option>
<option value="ssjson">SSJson</option>
<option value="csv">Csv</option>
</select>
<button class="settingButton" id="save">Save</button>
<div class="save-options"></div>
</div>
</div>
</div>
</div></body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-container {
width: calc(100% - 280px);
height: 100%;
float: left;
}
.sample-spreadsheets {
width: 100%;
height: calc(100% - 25px);
overflow: hidden;
}
#statusBar {
bottom: 0;
height: 25px;
width: 100%;
position: relative;
}
.options-container {
float: right;
width: 280px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.sample-options {
z-index: 1000;
}
.inputContainer {
width: 100%;
height: auto;
border: 1px solid #eee;
padding: 6px 12px;
margin-bottom: 10px;
box-sizing: border-box;
}
.settingButton {
color: #fff;
background: #82bc00;
outline: 0;
line-height: 1.5715;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
height: 32px;
padding: 4px 15px;
font-size: 14px;
border-radius: 2px;
user-select: none;
cursor: pointer;
border: 1px solid #82bc00;
box-sizing: border-box;
margin-bottom: 10px;
margin-top: 10px;
}
.settingButton:hover {
color: #fff;
border-color: #88b031;
background: #88b031;
}
.options-title {
font-weight: bold;
margin: 4px 2px;
}
#selectedFile {
width: 180px;
}
#saveFileType {
width: 120px;
height: 31px;
}
.open-options .item {
margin: 5px 0px;
display: flex;
}
.save-options .item {
margin: 5px 0px;
display: flex;
}
label {
margin-left: 3px;
}
select, input[type="text"], input[type="number"] {
display: inline-block;
margin-left: auto;
width: 120px;
font-weight: 400;
outline: 0;
line-height: 1.5715;
border-radius: 2px;
border: 1px solid #F4F8EB;
box-sizing: border-box;
}
