SpreadJS 파일 형식 기능을 사용하려면 관련 js 파일 링크를 Spread 링크 아래의 문서 헤더 섹션에 추가해야 합니다. 예를 들어 다음과 같습니다.
SpreadJS는 sjs 파일 형식을 열고 저장하는 기능을 지원합니다. xlsx, ssjson 및 csv 파일 형식을 가져오고 내보내는 기능도 지원합니다.
예를 들어 다음과 같습니다.
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
<template>
<div class="sample-tutorial">
<div class="sample-container">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div id="statusBar"></div>
</div>
<div class="options-container">
<div class="option-row">
<div class="inputContainer">
<input id="selectedFile" type="file" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" v-on:change="selectedFileChange($event)" />
<button class="settingButton" id="open" v-on:click="open">Open</button>
<div class="open-options">
<div class="item" v-show="needShow('open', 'openMode')">
<label for="open-openMode">OpenMode</label>
<select id="open-openMode" v-model.number="openOptions.openMode">
<option value="0">normal</option>
<option value="1">lazy</option>
<option value="2">incremental</option>
</select>
</div>
<div class="item" v-show="needShow('open', 'includeStyles')" >
<input type="checkbox" id="open-includeStyles" v-model="openOptions.includeStyles"/>
<label for="open-includeStyles">includeStyles</label>
</div>
<div class="item" v-show="needShow('open', 'includeFormulas')" >
<input type="checkbox" id="open-includeFormulas" v-model="openOptions.includeFormulas"/>
<label for="open-includeFormulas">includeFormulas</label>
</div>
<div class="item" v-show="needShow('open', 'frozenColumnsAsRowHeaders')" >
<input type="checkbox" id="open-frozenColumnsAsRowHeaders" v-model="openOptions.frozenColumnsAsRowHeaders"/>
<label for="open-frozenColumnsAsRowHeaders">frozenColumnsAsRowHeaders</label>
</div>
<div class="item" v-show="needShow('open', 'frozenRowsAsColumnHeaders')" >
<input type="checkbox" id="open-frozenRowsAsColumnHeaders" v-model="openOptions.frozenRowsAsColumnHeaders"/>
<label for="open-frozenRowsAsColumnHeaders">frozenRowsAsColumnHeaders</label>
</div>
<div class="item" v-show="needShow('open', 'fullRecalc')" >
<input type="checkbox" id="open-fullRecalc" v-model="openOptions.fullRecalc"/>
<label for="open-fullRecalc">fullRecalc</label>
</div>
<div class="item" v-show="needShow('open', 'dynamicReferences')" >
<input type="checkbox" id="open-dynamicReferences" v-model="openOptions.dynamicReferences"/>
<label for="open-dynamicReferences">dynamicReferences</label>
</div>
<div class="item" v-show="needShow('open', 'calcOnDemand')" >
<input type="checkbox" id="open-calcOnDemand" v-model="openOptions.calcOnDemand"/>
<label for="open-calcOnDemand">calcOnDemand</label>
</div>
<div class="item" v-show="needShow('open', 'includeUnusedStyles')" >
<input type="checkbox" id="open-includeUnusedStyles" v-model="openOptions.includeUnusedStyles"/>
<label for="open-includeUnusedStyles">includeUnusedStyles</label>
</div>
<div class="item" v-show="needShow('open', 'convertSheetTableToDataTable')" >
<input type="checkbox" id="open-convertSheetTableToDataTable" v-model="openOptions.convertSheetTableToDataTable"/>
<label for="open-convertSheetTableToDataTable">convertSheetTableToDataTable</label>
</div>
<div class="item" v-show="needShow('open', 'incrementalLoading')" >
<input type="checkbox" id="open-incrementalLoading" v-model="openOptions.incrementalLoading"/>
<label for="open-incrementalLoading">incrementalLoading</label>
</div>
<div class="item" v-show="needShow('open', 'encoding')" >
<label for="open-encoding">encoding</label>
<input type="text" id="open-encoding" v-model="openOptions.encoding"/>
</div>
<div class="item" v-show="needShow('open', 'rowDelimiter')" >
<label for="open-rowDelimiter">rowDelimiter</label>
<input type="text" id="open-rowDelimiter" v-model="openOptions.rowDelimiter"/>
</div>
<div class="item" v-show="needShow('open', 'columnDelimiter')" >
<label for="open-columnDelimiter">columnDelimiter</label>
<input type="text" id="open-columnDelimiter" v-model="openOptions.columnDelimiter"/>
</div>
</div>
</div>
<div class="inputContainer">
<label for="saveFileType">FileType:</label>
<select id="saveFileType" v-model="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" v-on:click="save">Save</button>
<div class="save-options">
<div class="item" v-show="needShow('save', 'includeBindingSource')" >
<input type="checkbox" id="save-includeBindingSource" v-model="saveOptions.includeBindingSource"/>
<label for="save-includeBindingSource">includeBindingSource</label>
</div>
<div class="item" v-show="needShow('save', 'includeStyles')" >
<input type="checkbox" id="save-includeStyles" v-model="saveOptions.includeStyles"/>
<label for="save-includeStyles">includeStyles</label>
</div>
<div class="item" v-show="needShow('save', 'includeFormulas')" >
<input type="checkbox" id="save-includeFormulas" v-model="saveOptions.includeFormulas"/>
<label for="save-includeFormulas">includeFormulas</label>
</div>
<div class="item" v-show="needShow('save', 'saveAsView')" >
<input type="checkbox" id="save-saveAsView" v-model="saveOptions.saveAsView"/>
<label for="save-saveAsView">saveAsView</label>
</div>
<div class="item" v-show="needShow('save', 'rowHeadersAsFrozenColumns')" >
<input type="checkbox" id="save-rowHeadersAsFrozenColumns" v-model="saveOptions.rowHeadersAsFrozenColumns"/>
<label for="save-rowHeadersAsFrozenColumns">rowHeadersAsFrozenColumns</label>
</div>
<div class="item" v-show="needShow('save', 'columnHeadersAsFrozenRows')" >
<input type="checkbox" id="save-columnHeadersAsFrozenRows" v-model="saveOptions.columnHeadersAsFrozenRows"/>
<label for="save-columnHeadersAsFrozenRows">columnHeadersAsFrozenRows</label>
</div>
<div class="item" v-show="needShow('save', 'includeAutoMergedCells')" >
<input type="checkbox" id="save-includeAutoMergedCells" v-model="saveOptions.includeAutoMergedCells"/>
<label for="save-includeAutoMergedCells">includeAutoMergedCells</label>
</div>
<div class="item" v-show="needShow('save', 'includeCalcModelCache')" >
<input type="checkbox" id="save-includeCalcModelCache" v-model="saveOptions.includeCalcModelCache"/>
<label for="save-includeCalcModelCache">includeCalcModelCache</label>
</div>
<div class="item" v-show="needShow('save', 'saveR1C1Formula')" >
<input type="checkbox" id="save-saveR1C1Formula" v-model="saveOptions.saveR1C1Formula"/>
<label for="save-saveR1C1Formula">saveR1C1Formula</label>
</div>
<div class="item" v-show="needShow('save', 'includeUnusedNames')" >
<input type="checkbox" id="save-includeUnusedNames" v-model="saveOptions.includeUnusedNames"/>
<label for="save-includeUnusedNames">includeUnusedNames</label>
</div>
<div class="item" v-show="needShow('save', 'includeEmptyRegionCells')" >
<input type="checkbox" id="save-includeEmptyRegionCells" v-model="saveOptions.includeEmptyRegionCells"/>
<label for="save-includeEmptyRegionCells">includeEmptyRegionCells</label>
</div>
<div class="item" v-show="needShow('save', 'encoding')" >
<label for="save-encoding">encoding</label>
<input type="text" id="save-encoding" v-model="saveOptions.encoding"/>
</div>
<div class="item" v-show="needShow('save', 'rowDelimiter')" >
<label for="save-rowDelimiter">rowDelimiter</label>
<input type="text" id="save-rowDelimiter" v-model="saveOptions.rowDelimiter"/>
</div>
<div class="item" v-show="needShow('save', 'columnDelimiter')" >
<label for="save-columnDelimiter">columnDelimiter</label>
<input type="text" id="save-columnDelimiter" v-model="saveOptions.columnDelimiter"/>
</div>
<div class="item" v-show="needShow('save', 'sheetIndex')" >
<label for="save-sheetIndex">sheetIndex</label>
<input type="number" id="save-sheetIndex" v-model.number="saveOptions.sheetIndex"/>
</div>
<div class="item" v-show="needShow('save', 'row')" >
<label for="save-row">row</label>
<input type="number" id="save-row" v-model.number="saveOptions.row"/>
</div>
<div class="item" v-show="needShow('save', 'column')" >
<label for="save-column">column</label>
<input type="number" id="save-column" v-model.number="saveOptions.column"/>
</div>
<div class="item" v-show="needShow('save', 'rowCount')" >
<label for="save-rowCount">rowCount</label>
<input type="number" id="save-rowCount" v-model.number="saveOptions.rowCount"/>
</div>
<div class="item" v-show="needShow('save', 'columnCount')" >
<label for="save-columnCount">columnCount</label>
<input type="number" id="save-columnCount" v-model.number="saveOptions.columnCount"/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref, toRaw } from "vue";
import '@mescius/spread-sheets-print';
import "@mescius/spread-sheets-vue";
import "@mescius/spread-sheets-io";
import '@mescius/spread-sheets-shapes';
import '@mescius/spread-sheets-charts';
import '@mescius/spread-sheets-slicers';
import '@mescius/spread-sheets-pivot-addon';
import '@mescius/spread-sheets-reportsheet-addon';
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-ganttsheet";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
const openOptions = {
openMode: 0,
includeStyles: true,
includeFormulas: true,
frozenColumnsAsRowHeaders: false,
frozenRowsAsColumnHeaders: false,
fullRecalc: false,
dynamicReferences: true,
calcOnDemand: false,
includeUnusedStyles: true,
convertSheetTableToDataTable: false,
incrementalLoading: false,
encoding: "UTF-8",
rowDelimiter: "\r\n",
columnDelimiter: ","
};
const saveOptions = {
includeBindingSource: false,
includeStyles: true,
includeFormulas: true,
saveAsView: false,
rowHeadersAsFrozenColumns: false,
columnHeadersAsFrozenRows: false,
includeAutoMergedCells: false,
includeCalcModelCache: false,
saveR1C1Formula: false,
includeUnusedNames: true,
includeEmptyRegionCells: true,
encoding: "UTF-8",
rowDelimiter: "\r\n",
columnDelimiter: ",",
sheetIndex: 0,
row: 0,
column: 0,
rowCount: 200,
columnCount: 20,
};
const openOptionsConfig = {
sjs: [{
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
}, ],
xlsx: [{
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
}],
ssjson: [{
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
}],
csv: [{
propName: "encoding",
type: "string",
default: "UTF-8"
}, {
propName: "rowDelimiter",
type: "string",
default: "\r\n"
}, {
propName: "columnDelimiter",
type: "string",
default: ","
}]
};
const saveOptionsConfig = {
sjs: [{
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
},
],
xlsx: [{
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
},
],
ssjson: [{
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
},
],
csv: [{
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
},
]
};
const spreadRef = ref(null);
const selectedFile = ref(null);
const openFileType = ref('');
const saveFileType = ref('sjs');
const initSpread = function (spread) {
spreadRef.value = spread;
let statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(toRaw(spread));
}
const selectedFileChange = function (e) {
selectedFile.value = e.target.files[0];
openFileType.value = getFileType(selectedFile.value);
}
const open = function () {
let spread = toRaw(spreadRef.value);
let file = selectedFile.value;
if (!file) {
return;
}
let fileType = getFileType(file);
let options = getOptions('open');
if (fileType === 'sjs') {
spread.open(file, function () {}, function () {}, options);
} else {
spread.import(file, function () {}, function () {}, options);
}
}
const save = function () {
let spread = toRaw(spreadRef.value);
let fileType = saveFileType.value;
let fileName = 'export.' + fileType;
let options = getOptions('save');
if (fileType === 'sjs') {
spread.save(function (blob) {
saveAs(blob, fileName);
}, function () {}, options);
} else {
if (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);
spread.export(function (blob) {
saveAs(blob, fileName);
}, function () {}, options);
}
}
const getOptions = function (mode) {
let optionsConfig, optionsValue;
if (mode === 'open') {
optionsConfig = openOptionsConfig[openFileType.value];
optionsValue = openOptions;
} else {
optionsConfig = saveOptionsConfig[saveFileType.value];
optionsValue = saveOptions;
}
let options = {};
optionsConfig.forEach((prop) => {
let v = optionsValue[prop.propName];
if (prop.type === 'number') {
v = +v;
}
options[prop.propName] = v;
});
return options;
}
const getFileType = function (file) {
if (!file) {
return;
}
let fileName = file.name;
let extensionName = fileName.substring(fileName.lastIndexOf(".") + 1);
if (extensionName === 'sjs') {
return 'sjs';
} else if (extensionName === 'xlsx' || extensionName === 'xlsm') {
return 'xlsx';
} else if (extensionName === 'ssjson' || extensionName === 'json') {
return 'ssjson';
} else if (extensionName === 'csv') {
return 'csv';
}
}
const mapExportFileType = function (fileType) {
if (fileType === 'ssjson') {
return GC.Spread.Sheets.FileType.ssjson;
} else if (fileType === 'csv') {
return GC.Spread.Sheets.FileType.csv;
}
return GC.Spread.Sheets.FileType.excel;
}
const needShow = function (mode, propName) {
let options = mode === 'open' ? openOptionsConfig[openFileType.value] : saveOptionsConfig[saveFileType.value];
return options && options.find((p) => p.propName === propName);
}
</script>
<style scoped>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
