Getting Started

System Requirements

SpreadJS widget requires one of the following browsers:

Microsoft Edge
Mozilla FireFox
Safari
Google Chrome

The browser must support HTML5.

Note: SpreadJS also supports Windows 11 and Windows Server 2022/2025.

Download and Installation

Using Bundles

Download the ZIP file (SpreadJS.xxxx.zip) and 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.datarange.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.threadedcomments.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.calcengine.languagepackages.xxxx.min.js gc.spread.pivot.pivottables.xxxx.min.js gc.spread.report.reportsheet.xxxx.min.js gc.spread.sheets.ai.xxxx.min.js gc.spread.sheets.barcode.xxxx.min.js gc.spread.sheets.calcworker.xxxx.min.js gc.spread.sheets.charts.xxxx.min.js gc.spread.sheets.collaboration.xxxx.min.js gc.spread.sheets.datacharts.xxxx.min.js gc.spread.sheets.formulapanel.xxxx.min.js gc.spread.sheets.ganttsheet.xxxx.min.js gc.spread.sheets.io.xxxx.min.js gc.spread.sheets.legacycharts.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.slicers.xxxx.min.js gc.spread.sheets.tablesheet.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 Licensing 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
spread-sheets	Core spreadsheet module
spread-sheets-ai-addon	AI assistance add‑on for SpreadJS
spread-sheets-barcode	Barcode support for SpreadJS
spread-sheets-calc-worker	Web worker add‑on for SpreadJS
spread-sheets-charts	Chart add‑on for SpreadJS
spread-sheets-collaboration	Spreadsheet collaboration module
spread-sheets-collaboration-addon	Collaboration add‑on for spreadsheets
spread-sheets-collaboration-client	Collaboration client for spreadsheets
spread-sheets-datacharts-addon	Data chart add‑on for SpreadJS
spread-sheets-formula-panel	Formula panel support for SpreadJS
spread-sheets-ganttsheet	GanttSheet support for SpreadJS
spread-sheets-io	File import/export support for SpreadJS
spread-sheets-languagepackages	Language localization resources
spread-sheets-legacy-charts	Legacy chart support for SpreadJS
spread-sheets-pdf	PDF export support for SpreadJS
spread-sheets-pivot-addon	Pivot table support for SpreadJS
spread-sheets-print	Print support for SpreadJS
spread-sheets-reportsheet-addon	ReportSheet support for SpreadJS
spread-sheets-shapes	Shapes support for SpreadJS
spread-sheets-slicers	Slicer  support for SpreadJS
spread-sheets-tablesheet	TableSheet support for SpreadJS

Content Security Policy (CSP)

A Content Security Policy (CSP) is a security mechanism that helps prevent content injection attacks such as Cross-Site Scripting (XSS). CSP can be configured through HTTP response headers or a <meta> element in the HTML <head> and defines which content sources are allowed to load and execute in the browser.

Configuring CSP

You can define a CSP in one of the following ways:

HTTP Response Header

Configure the Content-Security-Policy header on your web server.

HTML Meta Tag

<meta http-equiv="Content-Security-Policy" content="...">

Both approaches allow you to specify directives such as script-src, style-src, and worker-src to control permitted content sources.

SpreadJS and CSP

SpreadJS is a client-side JavaScript control that loads scripts, styles, and optionally Web Workers at runtime.

If CSP is enabled in your application, you must configure the appropriate directives to ensure that SpreadJS resources can load and execute correctly. Otherwise, certain features (such as Import/Export or calculation workers) may fail due to CSP violations.

SpreadJS:

Does not require unsafe-eval
Does not require unsafe-inline for scripts
Requires unsafe-inline for styles (see details below)
Requires proper worker-src configuration when using specific features

Recommended CSP Directives for SpreadJS

The required directives depend on how SpreadJS is deployed (CDN or local hosting).

1. Script Source

Using SpreadJS from the Official CDN

script-src 'self' https://cdn.xxx.com;

Hosting SpreadJS Locally

script-src 'self';

SpreadJS does not require unsafe-eval or unsafe-inline in script-src. For better security, avoid enabling them.

2. Style Source

SpreadJS dynamically applies inline styles at runtime. Therefore, the following directive is required:

Using SpreadJS from the Official CDN

style-src 'self' 'unsafe-inline' https://cdn.xxx.com;

Hosting SpreadJS Locally

style-src 'self' 'unsafe-inline';

Currently, SpreadJS requires setting unsafe-inline in style-src because some feature-related styles are dynamically generated and applied at runtime.

3. Worker Source

The worker-src directive is required for:

Import/Export APIs
Calculation Engine Worker feature

SpreadJS may create Web Workers dynamically using blob URLs. Therefore, the following configuration is required:

worker-src 'self' blob:;

This configuration allows:

self — Workers loaded from the same origin
blob: — Workers created dynamically via Blob URLs

If worker-src is not explicitly defined, some browsers may fall back to script-src. However, for better compatibility and clarity, it is strongly recommended to explicitly configure worker-src.

Complete CSP Examples

Example 1: Using SpreadJS from CDN

<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self'; 
      script-src 'self' https://cdn.xxx.com;
      style-src 'self' 'unsafe-inline' https://cdn.xxx.com;
      worker-src 'self' blob:;
      ">

Example 2: Hosting SpreadJS Locally

<meta http-equiv="Content-Security-Policy"
      content="
      default-src 'self';
      script-src 'self';
      style-src 'self' 'unsafe-inline';
      worker-src 'self' blob:;
      ">

The default-src directive defines the fallback policy for all resource types that do not have a specific directive explicitly configured (such as script-src or style-src).