# Getting Started

A collection of tutorials that show how to use SpreadJS, including system requirements

## Content

## 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 ](https://developer.mescius.com/spreadjs/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<br>SPREADJS\_EULA | Main directory for product |
| \\SpreadJS.xxxx\\css | gc.spread.sheets.x.x.x.css<br>gc.spread.sheets.excel2013darkGray.xxxx.css<br>gc.spread.sheets.excel2013lightGray.xxxx.css<br>gc.spread.sheets.excel2013white.xxxx.css<br>gc.spread.sheets.excel2016black.xxxx.css<br>gc.spread.sheets.excel2016colorful.xxxx.css<br>gc.spread.sheets.excel2016darkGray.xxxx.css | CSS files |
| \\SpreadJS.xxxx\\definition | gc.spread.sheets.d.ts<br>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<br>gc.spread.calcengine .xxxx.min.js<br>gc.spread.calcengine.advancedfunctions.xxxx.min.js<br>gc.spread.calcengine.basicfunctions.xxxx.min.js<br>gc.spread.common.xxxx.min.js<br>gc.spread.sheets.automerge.xxxx.min.js<br>gc.spread.sheets.bindings.xxxx.min.js<br>gc.spread.sheets.calcengine.xxxx.min.js<br>gc.spread.sheets.cellstate.xxxx.min.js<br>gc.spread.sheets.celltypes.xxxx.min.js<br>gc.spread.sheets.comments.xxxx.min.js<br>gc.spread.sheets.components.xxxx.min.js<br>gc.spread.sheets.conditionalformatting.xxxx.min.js<br>gc.spread.sheets.contextmenu.xxxx.min.js<br>gc.spread.sheets.core.xxxx.min.js<br>gc.spread.sheets.datarange.xxxx.min.js<br>gc.spread.sheets.datavalidation.xxxx.min.js<br>gc.spread.sheets.dragmerge.xxxx.min.js<br>gc.spread.sheets.fill.xxxx.min.js<br>gc.spread.sheets.filter.xxxx.min.js<br>gc.spread.sheets.floatingobjects.xxxx.min.js<br>gc.spread.sheets.formulatextbox.xxxx.min.js<br>gc.spread.sheets.hyperlink.xxxx.min.js<br>gc.spread.sheets.inputmask.xxxx.min.js<br>gc.spread.sheets.namebox.xxxx.min.js<br>gc.spread.sheets.outlinecolumn.xxxx.min.js<br>gc.spread.sheets.outlines.xxxx.min.js<br>gc.spread.sheets.search.xxxx.min.js<br>gc.spread.sheets.spacing.xxxx.min.js<br>gc.spread.sheets.sparklines.xxxx.min.js<br>gc.spread.sheets.statusbar.xxxx.min.js<br>gc.spread.sheets.threadedcomments.xxxx.min.js<br>gc.spread.sheets.tables.xxxx.min.js<br>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<br>zh\\gc.spread.sheets.resources.zh.xxxx.min.js<br>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<br>gc.spread.pivot.pivottables.xxxx.min.js<br>gc.spread.report.reportsheet.xxxx.min.js<br>gc.spread.sheets.ai.xxxx.min.js<br>gc.spread.sheets.barcode.xxxx.min.js<br>gc.spread.sheets.calcworker.xxxx.min.js<br>gc.spread.sheets.charts.xxxx.min.js<br>gc.spread.sheets.collaboration.xxxx.min.js<br>gc.spread.sheets.datacharts.xxxx.min.js<br>gc.spread.sheets.formulapanel.xxxx.min.js<br>gc.spread.sheets.ganttsheet.xxxx.min.js<br>gc.spread.sheets.io.xxxx.min.js<br>gc.spread.sheets.legacycharts.xxxx.min.js<br>gc.spread.sheets.pdf.xxxx.min.js<br>gc.spread.sheets.print.xxxx.min.js<br>gc.spread.sheets.shapes.xxxx.min.js<br>gc.spread.sheets.slicers.xxxx.min.js<br>gc.spread.sheets.tablesheet.xxxx.min.js | Plugins files |

**Install SpreadJS Designer**

1. Save the downloaded ZIP file (SpreadJSDesigner.zip) to a temporary directory on your system, and then unzip the files to a directory.
2. Run the setup file for your environment.
3. 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](/spreadjs/docs/getstarted/trialSpreadJS) 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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
You can download the SpreadJS packages from NPM:

| Package | Purpose |
| ------- | ------- |
| [spread-sheets](https://www.npmjs.com/package/@mescius/spread-sheets) | Core spreadsheet module |
| [spread-sheets-ai-addon](https://www.npmjs.com/package/@mescius/spread-sheets-ai-addon) | AI assistance add‑on for SpreadJS |
| [spread-sheets-barcode](https://www.npmjs.com/package/@mescius/spread-sheets-barcode) | Barcode support for SpreadJS |
| spread-sheets-calc-worker | Web worker add‑on for SpreadJS |
| [spread-sheets-charts](https://www.npmjs.com/package/@mescius/spread-sheets-charts) | Chart add‑on for SpreadJS |
| [spread-sheets-collaboration](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration) | Spreadsheet collaboration module |
| [spread-sheets-collaboration-addon](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration-addon) | Collaboration add‑on for spreadsheets |
| [spread-sheets-collaboration-client](https://www.npmjs.com/package/@mescius/spread-sheets-collaboration-client) | Collaboration client for spreadsheets |
| [spread-sheets-datacharts-addon](https://www.npmjs.com/package/@mescius/spread-sheets-datacharts-addon) | Data chart add‑on for SpreadJS |
| [spread-sheets-formula-panel](https://www.npmjs.com/package/@mescius/spread-sheets-formula-panel) | Formula panel support for SpreadJS |
| [spread-sheets-ganttsheet](https://www.npmjs.com/package/@mescius/spread-sheets-ganttsheet) | GanttSheet support for SpreadJS |
| [spread-sheets-io](https://www.npmjs.com/package/@mescius/spread-sheets-io) | File import/export support for SpreadJS |
| [spread-sheets-languagepackages](https://www.npmjs.com/package/@mescius/spread-sheets-languagepackages) | Language localization resources |
| [spread-sheets-legacy-charts](https://www.npmjs.com/package/@mescius/spread-sheets-legacy-charts) | Legacy chart support for SpreadJS |
| [spread-sheets-pdf](https://www.npmjs.com/package/@mescius/spread-sheets-pdf) | PDF export support for SpreadJS |
| [spread-sheets-pivot-addon](https://www.npmjs.com/package/@mescius/spread-sheets-pivot-addon) | Pivot table support for SpreadJS |
| [spread-sheets-print](https://www.npmjs.com/package/@mescius/spread-sheets-print) | Print support for SpreadJS |
| [spread-sheets-reportsheet-addon](https://www.npmjs.com/package/@mescius/spread-sheets-reportsheet-addon) | ReportSheet support for SpreadJS |
| [spread-sheets-shapes](https://www.npmjs.com/package/@mescius/spread-sheets-shapes) | Shapes support for SpreadJS |
| [spread-sheets-slicers](https://www.npmjs.com/package/@mescius/spread-sheets-slicers) | Slicer  support for SpreadJS |
| [spread-sheets-tablesheet](https://www.npmjs.com/package/@mescius/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

```html
<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

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

Hosting SpreadJS Locally

```auto
script-src 'self';
```

>type=note
> 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

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

Hosting SpreadJS Locally

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

>type=note
> 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:

```auto
worker-src 'self' blob:;
```

This configuration allows:

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

>type=note
> 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

```html
<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

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

>type=note
> 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`).