SpreadJSファイル機能を使用するために、ドキュメントのheadセクションのSpreadJSの参照の下に、関連するjsファイルのリンクを追加する必要があります。
例：
SpreadJSは、sjsファイル（SpreadJS独自ファイル）の読み込みと保存、Excelファイル(xlsx)、ssjson（SpreadJS独自の旧形式ファイル）と csvファイルのインポートとエクスポートをサポートします。
例：
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 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/@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-print/dist/gc.spread.sheets.print.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-reportsheet-addon/dist/gc.spread.report.reportsheet.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-ganttsheet/dist/gc.spread.sheets.ganttsheet.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">
<h2 class="section-title">Open</h2>
<input id="selectedFile" type="file" name="files[]" accept=".sjs, .xlsx, .xlsm, .xltm, .xltx, .ssjson, .json, .csv" />
<button class="settingButton" id="open">開く</button>
<div class="options-title">オプション（ファイル選択後に表示されます）</div>
<div class="open-options"></div>
</div>
<div class="inputContainer">
<h2 class="section-title">Save</h2>
<label for="saveFileType">Excel ファイル形式:</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="excelFileTypeContainer">
<label for="saveExcelFileType">Excel ファイル形式:</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>
<option value="XLTX">Workbook Template (*.xltx)</option>
</select>
</div>
</div>
<div class="options-title">オプション</div>
<div class="save-options"></div>
</div>
</div>
</div>
</div>
</body>
</html>
html,
body {
height: 100%;
margin: 0;
}
body {
position: absolute;
inset: 0;
color: #1f2933;
background: #f7f8fa;
}
.sample-tutorial {
display: flex;
height: 100%;
overflow: hidden;
}
.sample-container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
height: 100%;
}
.sample-spreadsheets {
flex: 1 1 auto;
min-height: 0;
width: 100%;
overflow: hidden;
}
#statusBar {
flex: 0 0 25px;
width: 100%;
height: 25px;
}
.options-container {
flex: 0 0 340px;
width: 340px;
height: 100%;
padding: 22px 20px;
box-sizing: border-box;
overflow: auto;
background: #ffffff;
border-left: 1px solid #e5e7eb;
}
.inputContainer {
padding: 0 0 22px;
margin: 0 0 22px;
border-bottom: 1px solid #eef0f3;
}
.inputContainer:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.section-title {
margin: 0 0 14px;
color: #111827;
font-size: 18px;
font-weight: 650;
line-height: 1.25;
}
.options-title {
margin: 18px 0 10px;
color: #374151;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}
.settingButton {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 34px;
margin: 10px 0 0;
padding: 0 14px;
color: #fff;
font: inherit;
font-weight: 600;
text-align: center;
white-space: nowrap;
background: #2563eb;
border: 1px solid #2563eb;
border-radius: 6px;
box-sizing: border-box;
cursor: pointer;
}
.settingButton:hover {
background: #1d4ed8;
border-color: #1d4ed8;
}
label {
color: #374151;
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
input[type="file"] {
width: 100%;
color: #374151;
font: inherit;
font-size: 13px;
}
select,
input[type="text"],
input[type="number"] {
width: 100%;
height: 34px;
padding: 0 10px;
color: #111827;
font: inherit;
background: #ffffff;
border: 1px solid #d8dde5;
border-radius: 6px;
box-sizing: border-box;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
#saveFileType {
margin-top: 7px;
}
.excelFileTypeContainer {
display: grid;
gap: 7px;
margin: 14px 0 0;
}
.open-options,
.save-options {
display: grid;
gap: 8px;
}
.open-options .item,
.save-options .item {
display: flex;
gap: 10px;
align-items: center;
min-height: 26px;
}
.item input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: #2563eb;
}
.item label {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
.item select,
.item input[type="text"],
.item input[type="number"] {
flex: 0 0 116px;
width: 116px;
}
@media (max-width: 760px) {
.sample-tutorial {
flex-direction: column;
}
.sample-container {
min-height: 55%;
}
.options-container {
flex: 0 0 45%;
width: 100%;
height: 45%;
border-top: 1px solid #e5e7eb;
border-left: 0;
}
}
