JSON 직렬화 및 역직렬화
테이블 시트 JSON 직렬화 및 역직렬화는 통합 문서의 toJSON 및 fromJSON 메서드를 사용하여 수행됩니다.
SJS 직렬화 및 역직렬화
테이블시트 SJS 직렬화 및 역직렬화는 통합 문서의 open 및 save 메서드를 사용하여 수행됩니다.
Excel 내보내기
Excel로 테이블시트 내보내기는 통합 문서의 export 메서드를 사용하여 수행됩니다.
PDF 내보내기
PDF로 테이블 시트 내보내기는 통합 문서의 savePDF 메서드를 사용하여 수행됩니다. PDF로 인쇄하거나 내보내기 위해 사용자는 printInfo 메서드를 사용하여 인쇄 정보를 사용자 정의할 수 있습니다.
인쇄
테이블 시트 인쇄에는 통합 문서의 print 메서드가 사용됩니다.
테이블 시트는 columnStart/columnEnd/rowStart/rowEnd, repeatColumnStart/repeatColumnEnd/repeatRowStart/repeatRowEnd, showRowHeader 등을 제외한 대부분의 인쇄 정보 속성을 지원합니다.
/*REPLACE_MARKER*/
/*DO NOT DELETE THESE COMMENTS*/
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
initSpread(spread);
initEvent(spread);
};
function initSpread(spread) {
spread.suspendPaint();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
spread.options.highlightInvalidData = true;
//init a data manager
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
//add product table
var productTable = dataManager.addTable("productTable", {
remote: {
read: {
url: baseApiUrl + "/Product"
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader);
//bind a view to the table sheet
var numericStyle = {};
numericStyle.formatter = "$ 0.00";
var formulaRule = {
ruleType: "formulaRule",
formula: "@>=50",
style: {
font:"bold 12pt Calibri",
backColor: "#F7D3BA",
foreColor :"#F09478"
}
};
var positiveNumberValidator = {
type: "formula",
formula: '@<50',
inputTitle: 'Data validation:',
inputMessage: 'Enter a number smaller than 50.',
highlightStyle: {
type: 'icon',
color: "#F09478",
position: 'outsideRight',
}
};
var myView = productTable.addView("myView", [
{ value: "Id", caption: "ID", width: 46},
{ value: "ProductName", caption: "Name", width: 200 },
{ value: "UnitPrice", caption: "Unit Price", width: 140, conditionalFormats: [formulaRule], validator: positiveNumberValidator, style: numericStyle },
{ value: "=SUM([@UnitsInStock] , [@UnitsOnOrder])", caption: "Total Units", width: 140},
{ value: "Discontinued", width: 120, style:{formatter:"[green]✔;;[red]✘"}}
]);
myView.fetch().then(function() {
sheet.setDataView(myView);
});
spread.resumePaint();
}
function initEvent(spread) {
document.getElementById('toJSON').onclick = function() {
var json = spread.toJSON({ includeBindingSource: true, saveAsView: true });
saveAs(new Blob([JSON.stringify(json)], { type: "text/plain;charset=utf-8" }), 'download.ssjson');
};
document.getElementById('toSJS').onclick = function() {
spread.save(function (blob) {
// save blob to a file
saveAs(blob, 'download.sjs');
}, function (e) {
console.log(e);
});
}
document.getElementById('fromJSONOrSJS').onclick = function() {
var file = document.getElementById("fileDemo").files[0];
if (file) {
var suffix = file.name.substr(file.name.lastIndexOf(".") + 1).toLowerCase();
if (suffix === "ssjson" || suffix === "json") {
var reader = new FileReader();
reader.onload = function () {
var json = JSON.parse(this.result);
spread.fromJSON(json);
};
reader.readAsText(file);
} else if (suffix === 'sjs') {
spread.open(file, function () {
// success callback to do something
}, function (e) {
console.log(e); // error callback
});
}
}
};
document.getElementById('saveExcel').onclick = function() {
spread.export(function (blob) {
// save blob to a file
saveAs(blob, "export.xlsx");
}, function (e) {
console.log(e);
}, {
fileType: GC.Spread.Sheets.FileType.excel
});
};
document.getElementById('exportPDF').onclick = function() {
spread.savePDF(function(blob) {
saveAs(blob, "export.pdf");
}, function(error) {
console.log(error);
}, null, spread.getSheetCount() + spread.getActiveSheetTabIndex());
};
document.getElementById('print').onclick = function() {
spread.print();
};
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/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/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-excelio/dist/gc.spread.excelio.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/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="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">
<fieldset>
<legend>Save</legend>
<div class="field-line">
<input type="button" id="toJSON" value="JSON" class="button">
</div>
<div class="field-line">
<input type="button" id="toSJS" value="SJS" class="button">
</div>
<div class="field-line">
<input type="button" id="saveExcel" value="Excel" class="button">
</div>
</fieldset>
<fieldset>
<legend>Load</legend>
<div class="field-line">
<input type="file" id="fileDemo" class="input">
</div>
<div class="field-line">
<input type="button" id="fromJSONOrSJS" value="JSON or SJS" class="button">
</div>
</fieldset>
<fieldset>
<legend>Render</legend>
<div class="field-line">
<input type="button" id="exportPDF" value="PDF" class="button">
</div>
<div class="field-line">
<input type="button" id="print" value="PRINT" class="button">
</div>
</fieldset>
</div>
</div>
</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;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fieldset {
padding: 6px;
margin: 0;
margin-top: 10px;
}
fieldset span,
fieldset input,
fieldset select {
display: inline-block;
text-align: left;
}
fieldset input[type=text] {
width: calc(100% - 58px);
}
fieldset input[type=button] {
width: 100%;
text-align: center;
}
fieldset input[type=file] {
width: 100%;
text-align: left;
}
fieldset select {
width: calc(100% - 50px);
}
.field-line {
margin-top: 4px;
}
.field-inline {
display: inline-block;
vertical-align: middle;
}
fieldset label.field-inline {
width: 100px;
}
fieldset input.field-inline {
width: calc(100% - 100px - 12px);
}