You can add a SpreadJS workbook to a web page using the following steps:
Add two link elements to the head section of the web page: one for the gc.spread.sheets.x.x.x.css stylesheet and the other for the gc.spread.sheets.all.x.x.x.min.js SpreadJS library.
Create a div element with an id attribute in the body of the page to host the SpreadJS component.
In the onload event of the web page define a javascript variable and assign it a workbook object by calling the Workbook constructor and providing it with the DOM object of the div element you created in the previous step. The Workbook object also takes an optional JSON object that specifies different properties for the workbook that can be set during instantiation. Alternatively, you can specify these options after the workbook is created.
Once the object is created, you can use the workbook variable to load a SpreadJS SSJSON file, import an Excel file, change the visible elements of the control like the scrollbars, tabstrip, formula box, and dynamically modify the workbook's sheets, tables, and charts, etc. The other feature demos will demonstrate many of these properties.
Finally, you can also access any workbook on the page using the GC.Spread.Sheets.findControl method and provide it with a DOM element on the page that hosts a workbook.
If you use JQuery, instantiate the workbook as follows:
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
createRoot(document.getElementById('app')).render(<AppFunc />);
// 2. Class Component sample
// createRoot(document.getElementById('app')).render(<App />);
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
export function AppFunc() {
let initSpread = function (value) {
let spread = value;
let sheet1 = spread.getSheet(0);
sheet1.setValue(0, 0, 'Hello World!');
}
return (<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
</div>);
}
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
let sheet1 = spread.getSheet(0);
sheet1.setValue(0, 0, 'Hello World!');
}
}
<!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$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(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: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/cjs/react.production.js',
'react-dom': 'npm:react-dom/cjs/react-dom.production.js',
'react-dom/client': 'npm:react-dom/cjs/react-dom-client.production.js',
'scheduler': 'npm:scheduler/cjs/scheduler.production.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);
