Getting Started
System Requirements
SpreadJS widget requires one of the following browsers:
Microsoft IE9+
Mozilla FireFox
Safari
Google Chrome
The browser must support HTML5.
The client-side Excel import and export requires IE10+.
Note: SpreadJS also supports Windows 11 and Windows Server 2022.
Download and Installation
Using Bundles
Download the ZIP file (SpreadJS.xxxx.zip) and the save it to a temporary directory on your system, and then unzip the files to a directory.
The default SpreadJS folders (Windows only):
Install Directory | Files | Description |
|---|---|---|
\SpreadJS.xxxx | LICENSE SPREADJS_EULA | Main directory for product |
\SpreadJS.xxxx\css | gc.spread.sheets.x.x.x.css gc.spread.sheets.excel2013darkGray.xxxx.css gc.spread.sheets.excel2013lightGray.xxxx.css gc.spread.sheets.excel2013white.xxxx.css gc.spread.sheets.excel2016black.xxxx.css gc.spread.sheets.excel2016colorful.xxxx.css gc.spread.sheets.excel2016darkGray.xxxx.css | CSS files |
\SpreadJS.xxxx\definition | GC.spread.sheets.d.ts gc.spread.excelio.d.ts | TypeScript API definition file |
\SpreadJS.xxxx\samples | Sample pages for the widget | |
\SpreadJS.xxxx\scripts | gc.spread.sheets.all.xxxx.min.js | Minimized js file for widget which includes all functions without plugins |
\SpreadJS.xxxx\scripts\modules | gc.data.xxxx.min.js gc.spread.calcengine.xxxx.min.js gc.spread.calcengine.advancedfunctions.xxxx.min.js gc.spread.calcengine.basicfunctions.xxxx.min.js gc.spread.common.xxxx.min.js gc.spread.sheets.automerge.xxxx.min.js gc.spread.sheets.bindings.xxxx.min.js gc.spread.sheets.calcengine.xxxx.min.js gc.spread.sheets.cellstate.xxxx.min.js gc.spread.sheets.celltypes.xxxx.min.js gc.spread.sheets.comments.xxxx.min.js gc.spread.sheets.components.xxxx.min.js gc.spread.sheets.conditionalformatting.xxxx.min.js gc.spread.sheets.contextmenu.xxxx.min.js gc.spread.sheets.core.xxxx.min.js gc.spread.sheets.datavalidation.xxxx.min.js gc.spread.sheets.dragmerge.xxxx.min.js gc.spread.sheets.fill.xxxx.min.js gc.spread.sheets.filter.xxxx.min.js gc.spread.sheets.floatingobjects.xxxx.min.js gc.spread.sheets.formulatextbox.xxxx.min.js gc.spread.sheets.hyperlink.xxxx.min.js gc.spread.sheets.inputmask.xxxx.min.js gc.spread.sheets.namebox.xxxx.min.js gc.spread.sheets.outlinecolumn.xxxx.min.js gc.spread.sheets.outlines.xxxx.min.js gc.spread.sheets.search.xxxx.min.js gc.spread.sheets.spacing.xxxx.min.js gc.spread.sheets.sparklines.xxxx.min.js gc.spread.sheets.statusbar.xxxx.min.js gc.spread.sheets.tables.xxxx.min.js gc.spread.sheets.touch.xxxx.min.js | Modules js files |
\SpreadJS.xxxx\scripts\interop | gc.spread.excelio.xxxx.min.js | Client-side Excel import and export support files |
\SpreadJS.xxxx\scripts\interop\angularjs | gc.spread.sheets.angularjs.xxxxx.min.js | AngularJS support files |
\SpreadJS.xxxx\scripts\interop\angular | gc.spread.sheets.angular.xxxxx.min.js | Angular support files |
\SpreadJS.xxxx\scripts\interop\react | gc.spread.sheets.react.xxxxx.min.js | React support file |
\SpreadJS.xxxx\scripts\interop\vuejs | gc.spread.sheets.vue.xxxxx.min.js | Vue support file |
\SpreadJS.xxxx\scripts\resources | ja\gc.spread.sheets.resources.ja.xxxxx.min.js zh\gc.spread.sheets.resources.zh.xxxx.min.js ko\gc.spread.sheets.resources.ko.xxxx.min.js | Japanese, Chinese, and Korean resource files |
\SpreadJS.xxxx\scripts\plugins | gc.spread.pivot.pivottables.xxxx.min.js gc.spread.sheets.barcode.xxxx.min.js gc.spread.sheets.charts.xxxx.min.js gc.spread.sheets.legacycharts.xxxx.min.js gc.spread.sheets.formulapanel.xxxx.min.js gc.spread.sheets.pdf.xxxx.min.js gc.spread.sheets.print.xxxx.min.js gc.spread.sheets.shapes.xxxx.min.js gc.spread.sheets.tablesheet.xxxx.min.js gc.spread.report.reportsheet.xxxx.min.js gc.spread.sheets.ganttsheet.xxxx.min.js gc.spread.calcengine.languagepackages.xxxx.min.js gc.spread.sheets.io.xxxx.min.js gc.spread.sheets.slicers.xxxx.min.js | Plugins files |
Install SpreadJS Designer
Save the downloaded ZIP file (SpreadJSDesigner.zip) to a temporary directory on your system, and then unzip the files to a directory.
Run the setup file for your environment.
Run the designer, select the lock icon, and enter your license key to unlock the SpreadJS Designer.
Platform | Setup |
|---|---|
Windows | SpreadJS-Designer.x.x.x.exe |
Mac | SpreadJS-Designer.x.x.x.dmg |
Linux | SpreadJS-Designer.x.x.x.AppImage |
The default SpreadJS designer folder:
Install Directory | Description |
|---|---|
%Program Files (x86)%\MESCIUS\SpreadJS Designer\x.x.x | Designer directory for product |
Refer to Trial Version and Licensing Information for licensing information.
Using NPM
To install SpreadJS packages using NPM, you must install Node.js and the npm command line interface using a Node installer or a Node version manager.
To learn how to get started with Node.js and npm command line interface, see npm Docs.
You can download the SpreadJS packages from NPM:
Package | Purpose |
|---|---|
Spreadsheet package | |
Spreadsheet designer component | |
Shape add-on for SpreadJS | |
TableSheet add-on for SpreadJS | |
SpreadJS package for Excel I/O operations | |
Calculation engine support for SpreadJS | |
Chart add-on for SpreadJS | |
Barcode support for SpreadJS | |
Pivot support for SpreadJS | |
PDF export support for SpreadJS | |
Print support for SpreadJS | |
Support for I/O operations in SpreadJS | |
SpreadJS Designer Component for React framework | |
SpreadJS Designer Wrapper Components for Vue framework | |
SpreadJS Wrapper Components for Angular framework |
Content Security Policy (CSP)
A CSP is a security policy implemented through headers or meta elements to regulate and authorize content loading on your website.
To establish a CSP Directive Reference, you have the option of either configuring HTTP response headers on the server or setting meta elements in the HTML header element. By doing this, you can create a set of rules that determine what content is permitted or prohibited. These rules enhance the security of your website against content injection and cross-site scripting (XSS) attacks.
SpreadJS, as an embedded control, must adhere to CSP guidelines by ensuring that the code remains free from any potential attack sites. So, include specific rules to increase the security of SpreadJS as mentioned below.
// No Eval rule in TSLINT
eval("alert('XSS!')");
// No Implied Eval rule in TSLINT
setTimeout("alert('Hi!');", 100);
setInterval("alert('Hi!');", 100);
execScript("alert('Hi!')");
window.setTimeout("count = 5", 10);
window.setInterval("foo = bar", 10);
// No New Function rule in TSLINT
new Function("alert('XSS!')")();Note that the import and export APIs use web worker to zip or unzip the files and the users must set the correct CSP rule to avoid errors.
For example, consider the following CSP Rule:
<meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob: 'unsafe-inline' 'unsafe-eval' data:">This CSP rule allows the loading of web workers from the same origin and the use of blob URIs for web workers where:
worker-src 'self': Restricts the loading of web workers to the same origin as the document.blob:: Allows the use of blob URIs for web workers.'unsafe-inline': Allows the execution of inline scripts.'unsafe-eval': Allows the use ofeval()and similar JavaScript functions that execute code passed as strings.data:: Allows the use of data URIs.