ExcelIO機能を使用するには、ドキュメントのheadセクションのSpreadリンクの下に、関連するjsファイルリンクを追加する必要があります。次に、例を示します。
ワークブックとExcelIOインスタンスを初期化します。
これで、クライアント側ExcelIOを使用して、Excelファイル（.xlsx）をSpread jsonファイルにインポートし、Spread jsonファイルをExcelファイルにエクスポートすることができます。インポートするにはExcelIOコンポーネントのopenメソッドを、エクスポートするにはExcelIOコンポーネントのsaveメソッドをそれぞれ使用します。
次に、例を示します。
Passwordを使用すると、パスワード保護されたExcelファイルをオープンまたは保存できます。これには、オプションとして{password:xxxx}をopenおよび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);
// if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
// document.getElementById('password').onselect = null;
// }
}, {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="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/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$/ja/purejs/node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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">追加データの読み込み</label>
<p class="summary" id="loading-container">
ロード進行状況：
<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" accept=".xlsx">
<input type="button" id="loadExcel" value="インポート" class="button">
</div>
<div class="inputContainer">
<input id="exportFileName" value="export.xlsx" class="input">
<input type="button" id="saveExcel" value="エクスポート" class="button">
</div>
</div>
<div class="option-row">
<div class="group">
<label>パスワード：
<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: 30px;
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;
}
