前端表格开发控件SpreadJS教程：如何开发Excel表格样式

SpreadJS 是一款基于 HTML5 的纯前端电子表格控件，兼容 450 种以上的 Excel 公式，凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。SpreadJS 为用户带来亲切的 Excel 使用体验的同时，满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景，极大降低了企业研发成本和项目交付风险。下面我们将讲述在使用SpreadJS进行开发时如何应用Excel主题。

下载最新版SpreadJS

你可以在 Spread.Sheets 中使用 Excel 主题。这需要你在页面上引入一个 CSS 文件：

<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.10.0.0.css" />

Excel 2013 主题也支持标签栏和滚动条。

你可以使用以下主题

主题名称	对应的 CSS 文件
Excel 2007	gc.spread.sheets.10.0.0.css
Excel 2013 White	gc.spread.sheets.excel2013white.10.0.0.css
Excel 2013 Light Gray	gc.spread.sheets.excel2013lightGray.10.0.0.css
Excel 2013 Dark Gray	gc.spread.sheets.excel2013darkGray.10.0.0.css
Excel 2016 Colorful	gc.spread.sheets.excel2016colorful.10.0.0.css
Excel 2016 Dark Gray	gc.spread.sheets.excel2016darkGray.10.0.0.css

You can also combine the Excel theme with other themes such as the bootstrap theme. For example:

Excel 主题和其他主题（比如 bootstrap 主题）可以共存。

<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.10.0.0.css" />

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" title="aa" /> < link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css" title="aa" />

使用 refresh 方法来刷新 Spread.Sheet 的显示，并应用主题。

选择SpreadJS六大理由：

1. 纯前端组件、跨平台应用嵌入：使用 SpreadJS 的功能，无需预装任何插件或第三方应用软件，可以原生的方式嵌入各类应用，与各类后端技术框架相结合，支持跨平台开发。
   
2. 在线导入、导出Excel（xlsx）:无需任何后台代码和第三方组件！SpreadJS 可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作
   
3. 业界领先的 Excel 兼容度：SpreadJS 支持 53 项单元格格式、18 种条件格式、32 种图表，可于 Web系统中轻松嵌入类Excel模块，实现如 Excel 般的数据分析和交互
   
4. 极高的处理性能和响应速度：SpreadJS 使用稀疏数组(Sparse Array)作为数据存储结构，用 HTML5 图形(Canvas)绘制界面，可提供流畅的交互体验和出色的性能，并最大化节省存储空间。
   
5. 一流的框架支持及二次扩展能力：基于原生 JavaScript，SpreadJS 全面兼容 Angular、 React、 Vue、TypeScript、Breeze 等前端开发框架，符合 UMD 规范，可按需加载，易于在 VSCode 中使用。
   

6. 强大的公式计算引擎：SpreadJS 兼容 450 种以上的 Excel 公式函数，内置高效、可扩展的计算引擎，满足用户自定义公式、跨表格引用等多场景下的计算需求，轻松实现数据聚合，让有效数据不断完善