概要と基本的な使い方

SpreadJSは、大きなExcelファイルのインポートやエクスポート処理の時間を短縮し、SpreadJS独自のファイル形式で保存した際のファイルサイズを従来よりも小さくするための、まったく新しい方法を提供します。

また、ユーザーがExcelファイルの数百あるワークシートのうち、いくつかのワークシートのみ必要とする場合、関連するワークシートを素早く読み込む方法も提供します。

SpreadJSファイル機能を使用するために、ドキュメントのheadセクションのSpreadJSの参照の下に、関連するjsファイルのリンクを追加する必要があります。 例: SpreadJSは、sjsファイル(SpreadJS独自ファイル)の読み込みと保存、Excelファイル(xlsx)、ssjson(SpreadJS独自の旧形式ファイル)と 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.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: "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="spreadjs culture" content="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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">開く</button> <div class="open-options"></div> </div> <div class="inputContainer"> <label for="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">保存</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; }