SpreadJS 自有文件格式 | 功能例子 | SpreadJS JavaScript 学习指南

为了使用 "SpreadJS文件格式 "功能，你需要将相关的js文件链接添加到文档的头部部分，在Spread链接的下面。比如说： SpreadJS支持打开和保存sjs文件格式，也支持导入和导出xlsx、ssjson和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

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';
import GC from '@grapecity-software/spread-sheets';
import "@grapecity-software/spread-sheets-io";
import '@grapecity-software/spread-sheets-charts';
import '@grapecity-software/spread-sheets-shapes';
import "@grapecity-software/spread-sheets-tablesheet";
import '@grapecity-software/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));

import * as React from 'react';
import GC from '@grapecity-software/spread-sheets';
import '@grapecity-software/spread-sheets-resources-zh';
import '@grapecity-software/spread-sheets-io';
import '@grapecity-software/spread-sheets-charts';
import '@grapecity-software/spread-sheets-shapes';
import '@grapecity-software/spread-sheets-slicers';
import '@grapecity-software/spread-sheets-pivot-addon';
import "@grapecity-software/spread-sheets-tablesheet";
import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';
GC.Spread.Common.CultureManager.culture("zh-cn");
import './styles.css';
window.GC = GC;
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
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;
}
function _getElementById(id) {
return document.getElementById(id);
}
var defaultOpenOptions = [
{ 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 defaultSaveOptions = [
{ 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: "includeCalcModelCache", 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',
}
export function AppFunc() {
const [spread, setSpread] = React.useState(null);
const [selectedFile, setSelectedFile] = React.useState(null);
const [openFileType, setOpenFileType] = React.useState('');
const [saveFileType, setSaveFileType] = React.useState(FileType.SJS);
const [openOptions, setOpenOptions] = React.useState({
sjs: {},
ssjson: {},
xlsx: {},
csv: {},
});
const [saveOptions, setSaveOptions] = React.useState({
sjs: {},
ssjson: {},
xlsx: {},
csv: {},
});
function initSpread(spread) {
setSpread(spread);
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
}
function open() {
var file = selectedFile;
if (!file) {
return;
}
var fileType = getFileType(file);
var options = deepClone(openOptions[fileType]);
if (fileType === FileType.SJS) {
spread.open(file, function () { }, function () { }, options);
} else {
spread.import(file, function () { }, function () { }, options);
}
}
function save() {
var fileType = saveFileType;
var fileName = 'export.' + fileType;
var options = deepClone(saveOptions[fileType]);
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 onSelectedFileChange(e) {
let selectedFile = e.target.files[0];
let openFileType = getFileType(selectedFile);
setSelectedFile(selectedFile);
setOpenFileType(openFileType)
}
function onSaveFileTypeChange(e) {
let saveFileType = e.target.value;
setSaveFileType(saveFileType);
}
function onPropChange(mode, fileType, prop, e) {
let element = e.target;
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;
}
if (mode === 'open') {
openOptions[fileType][prop.propName] = value;
setOpenOptions(openOptions);
} else if (mode === 'save') {
saveOptions[fileType][prop.propName] = value;
setSaveOptions(saveOptions);
}
}
function createOptions(options, fileType, mode) {
let selectFileType = mode === 'open' ? openFileType : saveFileType;
let display = selectFileType === fileType ? '' : 'none';
return <div className={fileType} style={{ display }}>
{options.map((prop) => createProp(mode, fileType, prop))}
</div>;
}
function createProp(mode, fileType, prop) {
let id = getElementId(mode, fileType, prop.propName);
if (prop.type === 'select') {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<select id={id} defaultValue={prop.default} onChange={(e) => onPropChange(mode, fileType, prop, e)}>
{prop.options.map((p) => <option value={p.value}>{p.name}</option>)}
</select>
</item>
} else if (prop.type === 'boolean') {
return <item className='item'>
<input id={id} type='checkbox' defaultChecked={prop.default} onChange={(e) => onPropChange(mode, fileType, prop, e)}></input>
<label for={id}>{prop.displayText || prop.propName}</label>
</item>
} else if (prop.type === 'number') {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<input id={id} type='number' defaultValue={prop.default} onChange={(e) => onPropChange(mode, fileType, prop, e)}></input>
</item>
} else {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<input id={id} type='text' defaultValue={prop.default} onChange={(e) => onPropChange(mode, fileType, prop, e)}></input>
</item>
}
}
return <div class="sample-tutorial">
<div class="sample-container">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div id="statusBar"></div>
</div>
<div className="options-container">
<div className="option-row">
<div class="inputContainer">
<input id="selectedFile" type="file" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" onChange={onSelectedFileChange} />
<button class="settingButton" id="open" onClick={open}>Open</button>
<div class="open-options">
{[
createOptions(defaultOpenOptions, FileType.SJS, 'open'),
createOptions(importXlsxOptions, FileType.Excel, 'open'),
createOptions(importSSJsonOptions, FileType.SSJson, 'open'),
createOptions(importCsvOptions, FileType.Csv, 'open'),
]}
</div>
</div>
<div class="inputContainer">
<label for="saveFileType">FileType:</label>
<select id="saveFileType" value={saveFileType} onChange={onSaveFileTypeChange}>
<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" onClick={save}>Save</button>
<div class="save-options">
{[
createOptions(defaultSaveOptions, FileType.SJS, 'save'),
createOptions(exportXlsxOptions, FileType.Excel, 'save'),
createOptions(exportSSJsonOptions, FileType.SSJson, 'save'),
createOptions(exportCsvOptions, FileType.Csv, 'save'),
]}
</div>
</div>
</div>
</div>
</div>;
}

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';
import GC from '@grapecity-software/spread-sheets';
import '@grapecity-software/spread-sheets-resources-zh';
import '@grapecity-software/spread-sheets-io';
import '@grapecity-software/spread-sheets-charts';
import '@grapecity-software/spread-sheets-shapes';
import '@grapecity-software/spread-sheets-slicers';
import '@grapecity-software/spread-sheets-pivot-addon';
import "@grapecity-software/spread-sheets-tablesheet";
GC.Spread.Common.CultureManager.culture("zh-cn");
import './styles.css';
const Component = React.Component;
window.GC = GC;
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: "includeCalcModelCache", 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',
}
function deepClone (obj) {
return JSON.parse(JSON.stringify(obj));
}
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;
}
function _getElementById(id) {
return document.getElementById(id);
}
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
selectedFile: null,
openFileType: '',
saveFileType: FileType.SJS,
openOptions: {
sjs: {},
ssjson: {},
xlsx: {},
csv: {},
},
saveOptions: {
sjs: {},
ssjson: {},
xlsx: {},
csv: {},
}
};
this.open = this.open.bind(this);
this.save = this.save.bind(this);
this.onSelectedFileChange = this.onSelectedFileChange.bind(this);
this.onSaveFileTypeChange = this.onSaveFileTypeChange.bind(this);
this.onPropChange = this.onPropChange.bind(this);
}
render() {
return <div class="sample-tutorial">
<div class="sample-container">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div id="statusBar"></div>
</div>
<div className="options-container">
<div className="option-row">
<div class="inputContainer">
<input id="selectedFile" type="file" accept=".sjs, .xlsx, .xlsm, .ssjson, .json, .csv" onChange={this.onSelectedFileChange} />
<button class="settingButton" id="open" onClick={this.open}>Open</button>
<div class="open-options">
{[
this.createOptions(openOptions, FileType.SJS, 'open'),
this.createOptions(importXlsxOptions, FileType.Excel, 'open'),
this.createOptions(importSSJsonOptions, FileType.SSJson, 'open'),
this.createOptions(importCsvOptions, FileType.Csv, 'open'),
]}
</div>
</div>
<div class="inputContainer">
<label for="saveFileType">FileType:</label>
<select id="saveFileType" value={this.state.saveFileType} onChange={this.onSaveFileTypeChange}>
<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" onClick={this.save}>Save</button>
<div class="save-options">
{[
this.createOptions(saveOptions, FileType.SJS, 'save'),
this.createOptions(exportXlsxOptions, FileType.Excel, 'save'),
this.createOptions(exportSSJsonOptions, FileType.SSJson, 'save'),
this.createOptions(exportCsvOptions, FileType.Csv, 'save'),
]}
</div>
</div>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
//init Status Bar
var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.getElementById('statusBar'));
statusBar.bind(spread);
}
open() {
var file = this.state.selectedFile;
if (!file) {
return;
}
var fileType = getFileType(file);
var options = deepClone(this.state.openOptions[fileType]);
if (fileType === FileType.SJS) {
this.spread.open(file, function() {}, function() {}, options);
} else {
this.spread.import(file, function() {}, function() {}, options);
}
}
save() {
var fileType = this.state.saveFileType;
var fileName = 'export.' + fileType;
var options = deepClone(this.state.saveOptions[fileType]);
if (fileType === FileType.SJS) {
this.spread.save(function(blob) { saveAs(blob, fileName); }, function() {}, options);
} else {
options.fileType = mapExportFileType(fileType);
this.spread.export(function(blob) { saveAs(blob, fileName); }, function() {}, options);
}
}
onSelectedFileChange(e) {
let selectedFile = e.target.files[0];
let openFileType = getFileType(selectedFile);
this.setState({ ...this.state, selectedFile, openFileType });
}
onSaveFileTypeChange(e) {
let saveFileType = e.target.value;
this.setState({ ...this.state, saveFileType });
}
onPropChange (mode, fileType, prop, e) {
let element = e.target;
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;
}
if (mode === 'open') {
let openOptions = deepClone(this.state.openOptions);
openOptions[fileType][prop.propName] = value;
this.setState({...this.state, openOptions});
} else if (mode === 'save') {
let saveOptions = deepClone(this.state.saveOptions);
saveOptions[fileType][prop.propName] = value;
this.setState({...this.state, saveOptions});
}
}
createOptions (options, fileType, mode) {
let selectFileType = mode === 'open' ? this.state.openFileType : this.state.saveFileType;
let display = selectFileType === fileType ? '' : 'none';
return <div className={fileType} style={{display}}>
{ options.map((prop) => this.createProp(mode, fileType, prop)) }
</div>;
}
createProp (mode, fileType, prop) {
let id = getElementId(mode, fileType, prop.propName);
if (prop.type === 'select') {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<select id={id} defaultValue={prop.default} onChange={(e) => this.onPropChange(mode, fileType, prop, e)}>
{ prop.options.map((p) => <option value={p.value}>{p.name}</option>) }
</select>
</item>
} else if (prop.type === 'boolean') {
return <item className='item'>
<input id={id} type='checkbox' defaultChecked={prop.default} onChange={(e) => this.onPropChange(mode, fileType, prop, e)}></input>
<label for={id}>{prop.displayText || prop.propName}</label>
</item>        
} else if (prop.type === 'number') {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<input id={id} type='number' defaultValue={prop.default} onChange={(e) => this.onPropChange(mode, fileType, prop, e)}></input>
</item>
} else {
return <item className='item'>
<label for={id}>{prop.displayText || prop.propName}</label>
<input id={id} type='text' defaultValue={prop.default} onChange={(e) => this.onPropChange(mode, fileType, prop, e)}></input>
</item>
}
}
}
ReactDOM.render(<App />, _getElementById('app'));

<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/react/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/spread/source/js/FileSaver.js" type="text/javascript"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/zh/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/zh/lib/react/license.js').then(function() {
System.import('./src/app');
}); 
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

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;
}

(function(global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js',
'@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js',
'@grapecity-software/spread-sheets-react': 'npm:@grapecity-software/spread-sheets-react/index.js',
'@grapecity-software/spread-sheets-io': 'npm:@grapecity-software/spread-sheets-io/index.js',
'@grapecity-software/spread-sheets-charts': 'npm:@grapecity-software/spread-sheets-charts/index.js',
'@grapecity-software/spread-sheets-shapes': 'npm:@grapecity-software/spread-sheets-shapes/index.js',
'@grapecity-software/spread-sheets-slicers': 'npm:@grapecity-software/spread-sheets-slicers/index.js',
'@grapecity-software/spread-sheets-pivot-addon': 'npm:@grapecity-software/spread-sheets-pivot-addon/index.js',
'@grapecity-software/spread-sheets-tablesheet': 'npm:@grapecity-software/spread-sheets-tablesheet/index.js',
'@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);