快速开始

浏览器要求

运行 SpreadJS 需要以下浏览器，注意：浏览器必须完全支持 HTML5 标准。

Microsoft IE Edge
Mozilla FireFox
Safari
Google Chrome

更多环境要求信息，请参考运行环境

安装

通过 NPM

要使用npm安装SpreadJS软件包，你必须使用Node安装程序或Node版本管理器来安装Node.js和npm命令行界面。

要了解如何开始使用Node.js和npm命令行界面，请参阅npm文档。

你可以从npm下载SpreadJS软件包：

Package	Purpose
@grapecity-software/spread-sheets	SpreadJS 核心模组
@grapecity-software/spread-sheets-ai-addon	SpreadJS AI 插件
@grapecity-software/spread-sheets-barcode	SpreadJS 条形码
@grapecity-software/spread-sheets-calc-worker	SpreadJS Web Worker 公式计算
@grapecity-software/spread-sheets-charts	SpreadJS 图表
@grapecity-software/spread-sheets-collaboration	SpreadJS 协同模组
@grapecity-software/spread-sheets-collaboration-addon	SpreadJS 协同插件
@grapecity-software/spread-sheets-collaboration-client	SpreadJS 协同客户端
@grapecity-software/spread-sheets-datacharts-addon	SpreadJS 数据图表插件
@grapecity-software/spread-sheets-formula-panel	SpreadJS 公式面板
@grapecity-software/spread-sheets-ganttsheet	SpreadJS 甘特图
@grapecity-software/spread-sheets-io	SpreadJS 文件导入导出
@grapecity-software/spread-sheets-languagepackages	语言本地化资源
@grapecity-software/spread-sheets-legacy-charts	SpreadJS 老版本图表
@grapecity-software/spread-sheets-pdf	SpreadJS 导出 PDF
@grapecity-software/spread-sheets-pivot-addon	SpreadJS 数据透视表插件
@grapecity-software/spread-sheets-print	SpreadJS 打印
@grapecity-software/spread-sheets-reportsheet-addon	SpreadJS 报表插件
@grapecity-software/spread-sheets-shapes	SpreadJS 形状
@grapecity-software/spread-sheets-slicers	SpreadJS 切片器
@grapecity-software/spread-sheets-tablesheet	SpreadJS 集算表

下载 SpreadJS 安装包

产品下载地址（下载页面会自动选择系统版本，支持 Windows / Mac / Linux）

不同版本下载包文件说明

Windows ：如 SpreadJS.Release.V16.1(for windows).zip

名称	类型	说明
产品入门必读.pdf	PDF 文件	包含快速入门的基础内容
新手训练营.png	PNG 图片	扫描二维码，参加免费的产品新手训练营，快速入门
SpreadJS 安装程序（运行库+示例+桌面设计器）.msi	Msi 安装程序	一键安装 SpreadJS 运行库、桌面设计器及示例，并创建开始菜单
SpreadJS 组件运行库	文件夹	包含SpreadJS 组件运行库文件及产品示例：js / css / ts

MacOS ：如 SpreadJS.Release.V16.1(for mac).zip

名称	类型	说明
产品入门必读.pdf	PDF 文件	包含快速入门的基础内容
新手训练营.png	PNG 图片	扫描二维码，参加免费的产品新手训练营，快速入门
表格编辑器（桌面端）Designer	文件夹	针对 MacOS 的桌面端设计器应用
SpreadJS 组件运行库	文件夹	包含SpreadJS 组件运行库文件及产品示例：js / css / ts

Linux：如 SpreadJS.Release.V16.1(for linux).zip

名称	类型	说明
产品入门必读.pdf	PDF 文件	包含快速入门的基础内容
新手训练营.png	PNG 图片	扫描二维码，参加免费的产品新手训练营，快速入门
表格编辑器（桌面端）Designer	文件夹	针对 Linux 的桌面端设计器应用
SpreadJS 组件运行库	文件夹	包含SpreadJS 组件运行库文件及产品示例：js / css / ts

安装 SpreadJS 桌面端设计器

将下载的产品包保存到系统上的临时目录，然后将文件解压缩到目录。
运行适合您的环境的安装文件。
运行设计器，选择锁定图标，然后输入许可证密钥以解锁 SpreadJS 设计器，或者申请试用授权。

系统	安装
Windows	SpreadJS 安装程序（运行库+示例+桌面设计器）.msi
Mac	SpreadJS-Designer.x.x.x.dmg
Linux	SpreadJS-Designer.x.x.x.AppImage

参考试用版和许可信息有关许可信息。

内容安全策略（CSP）

内容安全策略（CSP）是一种安全机制，用于帮助防止内容注入攻击，例如跨站脚本攻击（XSS）。CSP 可以通过 HTTP 响应头或 HTML <head> 中的 <meta> 元素进行配置，用于定义允许在浏览器中加载和执行的内容来源。

配置 CSP

您可以通过以下方式之一定义 CSP：

HTTP 响应头

在您的 Web 服务器上配置 Content-Security-Policy 响应头。

HTML Meta 标签

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

两种方式均允许您指定 script-src、style-src 和 worker-src 等指令，以控制允许的内容来源。

SpreadJS 与 CSP

SpreadJS 是一个客户端 JavaScript 控件，在运行时加载脚本、样式，以及可选的 Web Worker。

如果您的应用程序启用了 CSP，则必须配置相应的指令，以确保 SpreadJS 资源能够正常加载和执行。否则，某些功能（例如导入/导出或计算 Worker）可能会因违反 CSP 而失败。

SpreadJS：

不需要 unsafe-eval
脚本不需要 unsafe-inline
样式需要 unsafe-inline（详见下文）
使用特定功能时需要正确配置 worker-src

SpreadJS 推荐的 CSP 指令

所需的指令取决于 SpreadJS 的部署方式（CDN 或本地托管）。

1. 脚本来源（Script Source）

使用官方 CDN 的 SpreadJS

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

本地托管 SpreadJS

script-src 'self';

SpreadJS 在 script-src 中不需要 unsafe-eval 或 unsafe-inline。为提高安全性，请避免启用它们。

2. 样式来源（Style Source）

SpreadJS 在运行时会动态应用内联样式，因此需要以下指令：

使用官方 CDN 的 SpreadJS

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

本地托管 SpreadJS

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

目前，SpreadJS 需要在 style-src 中设置 unsafe-inline，因为某些功能相关的样式是在运行时动态生成和应用的。

3. Worker 来源（Worker Source）

以下功能需要配置 worker-src 指令：

导入/导出 API
计算引擎 Worker 功能

SpreadJS 可能会使用 blob URL 动态创建 Web Worker，因此需要以下配置：

worker-src 'self' blob:;

此配置允许：

self — 从同源加载的 Worker
blob: — 通过 Blob URL 动态创建的 Worker

如果未明确定义 worker-src，某些浏览器可能会回退到 script-src。但为了更好的兼容性和清晰性，强烈建议明确配置 worker-src。

完整 CSP 示例

示例 1：使用 CDN 的 SpreadJS

<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:;
      ">

示例 2：本地托管 SpreadJS

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

default-src 指令为所有未明确配置特定指令（如 script-src 或 style-src）的资源类型定义回退策略。