SpreadJS 파일 형식 기능을 사용하려면 관련 js 파일 링크를 Spread 링크 아래의 문서 head 섹션에 추가해야 합니다.
SpreadJS는 sjs 파일 형식의 열기와 저장을 지원합니다. 또한 xlsx, xlsm, xltm, xltx, ssjson, csv 파일 형식의 가져오기와 내보내기도 지원합니다.
예:
class GC.Spread.Sheets.Workbook
GC.Spread.Sheets.SaveOptions
GC.Spread.Sheets.OpenOptions
GC.Spread.Sheets.ImportOptions
GC.Spread.Sheets.ExportOptions
GC.Spread.Sheets.ExcelFileType
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 },
{ propName: "convertSheetTableToDataTable", type: "boolean", default: false },
];
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 },
{ propName: "losslessEditing", 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 {
if (fileType === FileType.Csv) {
var { sheetIndex, row, rowCount, column, columnCount } = options;
options.range = {
sheetIndex: sheetIndex,
row: row,
rowCount: rowCount,
column: column,
columnCount: columnCount,
};
}
options.fileType = mapExportFileType(fileType);
if (fileType === 'xlsx') {
fileName = 'export.' + options.excelFileType.toLowerCase();
}
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 (mode === 'save') {
var excelFileTypeContainer = document.querySelector('.excelFileTypeContainer');
excelFileTypeContainer.style.display = fileType === 'xlsx' ? 'block' : 'none';
}
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;
});
if ( mode === 'save' && saveFileType.value === 'xlsx') {
var excelFileType = document.querySelector('#saveExcelFileType');
options.excelFileType = excelFileType.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' || extensionName === 'xltm' || extensionName === 'xltx') {
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="spreadjs culture" content="ko-kr"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.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, .xltm, .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="excelFileTypeContainer">
<label for="fileType">Excel FileType:</label>
<div>
<select id="saveExcelFileType">
<option value="XLSX">Workbook (*.xlsx)</option>
<option value="XLSM">Macro-Enabled Workbook (*.xlsm)</option>
<option value="XLTM">Macro-Enabled Template (*.xltm)</option>
</select>
</div>
</div>
<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;
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;
}
.excelFileTypeContainer {
margin-bottom: 10px;
}
#saveExcelFileType {
margin: 10px 0;
width: 100%;
}
