概述

Spread.Sheets V11SP1 正式发布到 npm,地址https://www.npmjs.com/~grapecity 。项目中使用 Spread.Sheets 将更加方便优雅。

您可以通过命令 npm install @grapecity/spread-sheets 引用 spread.sheets 资源。Excelio、PDF、chart 以及语言资源都是独立 package,需要单独安装。

以 webpack 项目为例,下面将展示如何使用 Spread.Sheets。

1、安装 Node.js 和 Npm

2、新建"spreadjs_webpack"文件夹

3、在文件夹中通过 npm 命令创建一个新的工程
输入"npm init -y" 创建 package.json

 {
 "name": "spreadjs_webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo "Error: no test specified" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
 }

4、安装 webpack
输入命令 "npm install webpack --save-dev"
输入命令 "npm install webpack-cli --save-dev"

5、创建如下结构及文件
spreadjs_webpack

 |- package.json
 |- webpack.config.js
 |- /dist
 |- index.html
 |- /src
 |-index.js

package.json

 { "name": "spreadjs_webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build": "webpack --config webpack.config.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "webpack": "^4.5.0",
 "webpack-cli": "^2.0.14"
 }
 }

index.html

 <!DOCTYPE html>
 <html lang="en">

<head>
 <meta charset="UTF-8">
 <title>SpreadJS Development</title>
 <script src="bundle.js"></script>
 </head>

<body>
 <div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
 </body>

</html>
 

6、安装 Spread.Sheets

输入命令 "npm install @grapecity/spread-sheets --save"
安装完成后您会在 package.json kandao "@grapecity/spread-sheets": "^11.1.0"spread.sheets npm 模块会安装在 "node_modules-> @grapecity -> spread-sheets" 文件夹中。
从 "node_modules-> @grapecity -> spread-sheets -> styles"复制 Spread.Sheets css 到 dist 文件夹。

7、引用 Spread.Sheets 模块并实现相关逻辑

Update index.html

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>SpreadJS Development</title>
 <link href="gc.spread.sheets.excel2013white.css" rel="stylesheet"/>
 <script src="bundle.js"></script>
 </head>

<body>
 <div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
 </body>
 </html>
 

Update index.js

 var gc = require('@grapecity/spread-sheets');

window.onload = function () {
 var workbook = new gc.Spread.Sheets.Workbook(document.getElementById("ss"));
 var worksheet = workbook.getActiveSheet();
 worksheet.getCell(3,3).value("SpreadJS Npm Package in Webpack Project");
 }
 

8、Build and Run

输入命令 "npm run build",浏览器查看效果。

从何处获取最新版的 SpreadJS?

新一代 JavaScript 电子表格控件 SpreadJS 正式发布 2018 V11.1 版本,新版本提供撤销/重做功能,并增强了 UI 和数据筛选,极大的提升了产品的实用性,并更加方便优雅的嵌入您的应用系统。点击此处立即试用

想要查看更多 SpreadJS 新版本特性,请点击此处


如果你的项目需要一款功能和 Excel 类似且支持 WinForm、ASP.NET、XAML 、WinRT 等多个平台的表格控件。用于在您的应用系统中实现表格数据录入和编辑等交互功能,并且提供灵活的定制能力和丰富的数据可视化效果。Spread Studio 表格控件能完全满足您的需求,它目前已经广泛应用在财务、预算、工程、统计等领域的信息系统中。通过图表引擎和数据可视化功能,为商业表单控制面板提供丰富、有效的内容信息。点击这里,了解 Spread Studio

如果您不想借助 Microsoft Excel,并想超快批量操作 Excel 文件,我们推荐您使用 Spread 表格组件,无需安装 Microsoft Excel,通过代码,您即可快速创建、导入、编辑、转化、导出 Excel 文件,支持多种应用程序平台的调用,不限服务器类型,拥有高性能快速处理引擎,大幅缩短您的开发时间。点击这里,了解 Spread 表格组件

如果你还有其他疑问,可以到 GCDN (葡萄城技术社区)获得技术支持:

SpreadJS专区:http://gcdn.gcpowertools.com.cn/showforum-185-1.html

GCDN:http://gcdn.grapecity.com.cn/

官方网站:葡萄城官网