ExcelIO 기능을 사용하려면 관련 js 파일 링크를 Spread 링크 아래의 문서 헤더 섹션에 추가해야 합니다. 예:
통합 문서와 Excel IO 인스턴스를 초기화하십시오.
그런 다음 클라이언트 쪽 ExcelIO를 사용하여 Excel 파일(.xlsx)을 Spread JSON으로 가져오거나 Spread JSON을 Excel 파일로 내보낼 수 있습니다. ExcelIO 컴포넌트의 open 메서드를 사용하여 가져오거나 ExcelIO 컴포넌트의method of the ExcelIO save 메서드를 사용하여 내보낼 수 있습니다.
예:
또한 암호를 사용하여 보호된 Excel 파일을 열거나 저장할 수 있습니다. **options{password:xxxx}**를 *open and save* 메서드로 전달하기만 하면 됩니다. 예:
요청 시 계산을 지연하고 가져오기 성능을 향상시키려면 calcOnDemand 속성을 true로 설정합니다.
ExcelIO 내보내기/가져오기는 통합 문서가 저장될 때 시트 보기 위치를 유지합니다. 다음에 통합 문서를 열면 저장하기 전에 시트에서 스크롤한 위치로 자동으로 스크롤됩니다.
이 기능에는 기본적으로 시트의 왼쪽 위 셀이 사용됩니다. 예를 들어 통합 문서가 저장될 때 왼쪽 위 셀이 A22인 경우 시트는 다시 열릴 때 왼쪽 위에 해당 셀이 있도록 자동으로 스크롤됩니다.
이 기능은 기본적으로 사용자가 편집 중인 큰 통합 문서에서 유용할 수 있습니다. 통합 문서를 다시 연 후 편집 중이었던 위치로 완전히 다시 스크롤하는 대신 바로 중단한 위치를 선택할 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {calcOnDemand: true});
spread.fromJSON(jsonData);
var excelIo = new GC.Spread.Excel.IO();
document.getElementById('loadExcel').onclick = function () {
var excelFile = document.getElementById("fileDemo").files[0];
var password = document.getElementById('password').value;
var incrementalEle = document.getElementById("incremental");
var loadingStatus = document.getElementById("loadingStatus");
incrementalEle.addEventListener('change', function (e) {
document.getElementById('loading-container').style.display = incrementalEle.checked ? "block" : "none";
});
// here is excel IO API
excelIo.open(excelFile, function (json) {
var workbookObj = json;
if (incrementalEle.checked) {
spread.fromJSON(workbookObj, {
incrementalLoading: {
loading: function (progress, args) {
progress = progress * 100;
loadingStatus.value = progress;
console.log("current loading sheet", args.sheet && args.sheet.name());
},
loaded: function () {
}
}
});
} else {
spread.fromJSON(workbookObj);
}
}, function (e) {
// process error
alert(e.errorMessage);
}, {password: password});
};
document.getElementById('saveExcel').onclick = function () {
var fileName = document.getElementById('exportFileName').value;
var password = document.getElementById('password').value;
if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
}
var json = spread.toJSON();
// here is excel IO API
excelIo.save(json, function (blob) {
saveAs(blob, fileName);
}, function (e) {
// process error
console.log(e);
}, {password: password});
};
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/excel_data.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 id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input type="checkbox" id="incremental" checked/>
<label for="incremental">Incremental Loading</label>
<p class="summary" id="loading-container">
Loading progress:
<input style="width: 231px;" id="loadingStatus" type="range" name="points" min="0" max="100" value="0" step="0.01"/>
</p>
<input type="file" id="fileDemo" class="input">
<br>
<input type="button" id="loadExcel" value="import" class="button">
</div>
<div class="inputContainer">
<input id="exportFileName" value="export.xlsx" class="input">
<input type="button" id="saveExcel" value="export" class="button">
</div>
</div>
<div class="option-row">
<div class="group">
<label>Password:
<input type="password" id="password">
</label>
</div>
</div>
</div>
</div></body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
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;
}
.input {
font-size: 14px;
height: 20px;
border: 0;
outline: none;
background: transparent;
}
.button {
height: 30px;
padding: 6px 12px;
width: 80px;
margin-top: 6px;
}
.group {
padding: 12px;
}
.group input {
padding: 4px 12px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}