请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

alizee10251 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

银牌会员

98

主题

150

帖子

2830

积分

银牌会员

积分
2830

活字格认证活字格高级认证微信认证勋章

alizee10251 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
银牌会员   /  发表于:2018-6-13 10:43  /   查看:3904  /  回复:0
本帖最后由 alizee1025 于 2018-6-13 10:49 编辑

概述
SpreadJS V11SP1 正式发布到 npm,地址https://www.npmjs.com/~grapecity 。项目中使用 SpreadJS 将更加方便优雅。
您可以通过命令 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
  1. {
  2. "name": "spreadjs_webpack",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo "Error: no test specified" && exit 1"
  8. },
  9. "keywords": [],
  10. "author": "",
  11. "license": "ISC"
  12. }
复制代码

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

5、创建如下结构及文件
spreadjs_webpack
  1. |- package.json
  2. |- webpack.config.js
  3. |- /dist
  4. |- index.html
  5. |- /src
  6. |-index.js
复制代码

package.json
  1. { "name": "spreadjs_webpack",
  2. "version": "1.0.0",
  3. "description": "",
  4. "main": "index.js",
  5. "scripts": {
  6. "build": "webpack --config webpack.config.js"
  7. },
  8. "keywords": [],
  9. "author": "",
  10. "license": "ISC",
  11. "devDependencies": {
  12. "webpack": "^4.5.0",
  13. "webpack-cli": "^2.0.14"
  14. }
  15. }
复制代码

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4. <meta charset="UTF-8">
  5. <title>SpreadJS Development</title>
  6. <script src="bundle.js"></script>
  7. </head>

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

  11. </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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>SpreadJS Development</title>
  6. <link href="gc.spread.sheets.excel2013white.css" rel="stylesheet"/>
  7. <script src="bundle.js"></script>
  8. </head>

  9. <body>
  10. <div id="ss" style="width:80%;height:80vh;border:1px solid lightgray"></div>
  11. </body>
  12. </html>
复制代码

Update index.js
  1. var gc = require('@grapecity/spread-sheets');

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

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 (葡萄城技术社区)获得技术支持:
官方网站:葡萄城官网


0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部