文档章节

SpreadJS使用进阶指南 - 使用 NPM 管理你的项目

葡萄城技术团队
 葡萄城技术团队
发布于 06/21 16:11
字数 1293
阅读 26
收藏 2
点赞 0
评论 0

前言

SpreadJS作为一款性能出众的纯前端电子表格控件,自2015年发布以来,已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM,作为管理Node.js库最有力的手段,解决了很多NodeJS代码部署的问题。

如今,为让您更方便的使用产品和更好地管理项目中的SpreadJS代码,我们已将SpreadJS应用打包发布到了NPM服务器。如您需要,请点击查看(需要FQ)

NPM简介

也许您刚刚接触前端开发,或者刚刚使用NodeJS。NPM对于您来说,可能会感到些许陌生。这里,是NPM的简单介绍,希望能够帮您:NPM是随同NodeJS一起发布的包管理工具,也是目前用于管理node.js库最有效的手段。它能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

1.       允许用户从NPM服务器下载别人编写的第三方包到本地使用。

2.       允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

3.       允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

本文中,我们将向您介绍如何在webpack项目中使用SpreadJS NPM包。

安装Node.js和NPM

在使用该项目之前,请确保下载并安装Node.jsNPM

安装项目文件和文件夹

现在已经安装了Node.jsNPM,我们将创建在webpack项目中使用的文件夹和文件。第一个创建的文件夹将被称为spreadjs_webpack

创建文件夹后,打开命令提示符,导航到创建的文件夹,然后输入以下命令:

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"
}

复制代码

 

 

 

在创建该文件之后,输入以下命令,并在每个命令后面输入:

npm install webpack --save
npm install webpack-cli --save

 

 

这会将一个node_modules文件夹添加到项目中,这是我们获取Spread引用的地址。

首先,我们将创建一个webpack.config.js文件。创建该文件,然后将以下内容添加到文件中:

复制代码

const path = require('path');
 
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: "development",
    optimization: {
        minimize: false
    }
}

复制代码

 

 

另外,package.json文件需要稍微改变:

复制代码

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

复制代码

 

 

在同一个spreadjs_webpack文件夹中,我们将创建一个dist文件夹并在该文件夹中创建一个名为index.html的html文件。这个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>

复制代码

 

 

我们需要手动创建的最后一个文件夹和文件是spreadjs_webpack文件夹中的src文件夹,以及该文件夹中的index.js文件。我们稍后将添加内容。目录的结构应该如下所示:

复制代码

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

复制代码

 

 

安装Spread.Sheets并添加引用

回到命令提示符,输入以下命令来安装Spread.Sheets

npm install @grapecity/spread-sheets

 

 

一旦安装完毕,回到package.json文件并在依赖项部分为Spread.Sheets添加一个依赖项:

复制代码

{
  "name": "spreadjs_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@grapecity/spread-sheets": "^11.1.0",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2"
  }
}

复制代码

 

 

要完成HTML文件,请将Spread.Sheets css文件从node_modules / @ grapecity / spread-sheets / styles文件夹复制到dist文件夹。更新index.html 文件以引用此css文件:

复制代码

<!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>

复制代码

 

 

现在我们可以在index.js文件中添加代码来实际初始化Spread.Sheets组件:

复制代码

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");
}

复制代码

 

 

要测试项目,请返回到命令提示符并输入以下命令:

npm run build

 

 

要正确运行页面,请在Web浏览器中打开index.html文件:

https://img4.mukewang.com/5b2b49f2000108f707570745.jpg

总结

本教程展示了在webpack项目中使用SpreadJS NPM包是多么容易。这只是一个开始,你可以在此基础上创建更高级的项目。

关于SpreadJS – 可嵌入您系统的在线Excel

SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,适用于 .NET、Java 、Web 应用程序、移动端等多种平台的表格数据处理和类 Excel 功能的表格程序开发。全中文操作界面,零学习成本!便于您在系统开发过程中,更安全的管理 Excel 数据,更快捷的完成海量数据交互,更方便的进行数据导出、导入、排序、过滤、增删改查、可视化及 Excel 导入/导出等操作。

© 著作权归作者所有

共有 人打赏支持
葡萄城技术团队

葡萄城技术团队

粉丝 320
博文 494
码字总数 706491
作品 13
西安
高级程序员
SpreadJS纯前端表格控件V11.1震撼来袭

全球最大的控件提供商葡萄城宣布,纯前端表格控件SpreadJS 正式发布2018 V11.1 版本,新版本提供撤销/重做功能,并增强了UI和数据筛选,极大的扩展了产品的实用功能,可更加方便优雅的嵌入您...

powertoolsteam
06/26
0
0
怪兽级性能,用代码玩转Excel!葡萄城强势发布Spread表格组件

日前,全球最大的控件提供商葡萄城,强势发布又一重磅产品:Spread表格组件。这是一款仅用代码即可批量操作Excel文件的产品,不受应用程序平台和服务器类型的限制,且具有“怪兽级”性能表现...

powertoolsteam
06/29
0
0
React Native基础&入门教程:调试React Native应用的一小步

React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。 试想一下,当你在手机屏幕按下一个按钮,...

葡萄城控件技术团队
06/04
0
0
AngularJs应用页面切换优化方案

葡萄城的一款尚在研发中的产品,对外名称暂定为X项目。其中使用了已经上市的wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家。如本篇的在页面切换的过程中优化方案,欢...

葡萄城控件技术团队
2015/01/15
0
8
TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开...

powertoolsteam
06/29
0
0
JavaScript 开发人员需要知道的简写技巧

本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和...

葡萄城控件技术团队
2017/10/24
0
6
JavaScript 开发人员需要知道的简写技巧

本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读。 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。 文章将分成初级篇和...

powertoolsteam
06/29
0
0
作为前端Web开发者,这12条基本命令不可不会

对于开发人员来说,终端是最重要的工具之一。掌握终端,能够有效的提升开发人员的工作流程。使用终端,许多日常任务都被简化为了编写简单的命令并按下 Enter 按钮。 本文列举了一系列 Linux ...

powertoolsteam
06/26
0
0
NPM使用手册

NPM是什么 在项目开发过程当中,我们常常需要引用他人已经开发好的包,比如React,Webpack, angular等等,而npm就是一个用来管理(安装,查看,更新,卸载...)这些包的工具。你也可以上传你...

mooonx
2017/11/29
0
0
SpreadJS 全面支持 Angular2,V10.2 版本即将发布

日前,纯前端表格控件 SpreadJS 发布了最新的CTP版本,在此版本中增加了对 Angular2 的支持以及一些 bug 修复。 SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件...

葡萄城控件技术团队
2017/06/21
404
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring配置xml启动报错 Connot find 'beans'

1.我们先看一下spring的原始配置 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSc......

江湖鱼大虾
5分钟前
0
0
与女儿谈商业模式 (4):戴尔的成功秘诀

分类:与女儿谈商业模式 | 标签: 戴尔 经济学 陈志武 2007-05-15 10:26阅读(7434)评论(36)   2007年5月《创富志》与“女儿谈商业模式”专栏 (之四)   戴尔的成功秘诀   陈志武   ...

祖冲之
14分钟前
0
0
www.w3.org被qiang导致logback报错:Connect reset

web项目部署到tomcat后,web项目中的logback不能运行,报错信息如下: Reported exception: ch.qos.logback.core.joran.spi.JoranException: I/O error occurred while parsing xml file......

浮躁的码农
28分钟前
0
0
JDeveloper中文乱码解决

全局设置字体; 全局设置环境编码; 项目设置编译器环境编码。

wffger
56分钟前
2
0
MySQL主从介绍 , 准备工作,配置主,配置从, 测试主从同步

MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主从后,在A上写数据,另外一台B也会跟着写数据,两者数据实时同步的 MySQL主从是基于binlog的,主上须开启bin...

TaoXu
今天
2
0
线性代数学习总结

亭子happy
今天
1
0
Java8:Lambda表达式增强版Comparator和排序

1、概述 在这篇教程里,我们将要去了解下即将到来的JDK 8(译注,现在JDK 8已经发布了)中的Lambda表达式——特别是怎样使用它来编写Comparator和对集合(Collection)进行排序。 这篇文章是...

孟飞阳
今天
0
0
从架构到组件,深挖istio如何连接、管理和保护微服务2.0?

近几年我一直从事于微服务系统的设计以及实现方面的工作,属于微服务架构一线实践者。之前做过一些单体系统的微服务改造,在微服务拆分、治理等方面都有一定的经验。 本人比较特殊一点的经历...

xiaomin0322
今天
1
0
基于vue的h5文件切片上传(获取文件md5,实现秒传、进度条实现)

template <button @click="file"></button><label ref="upload" style="position: relative;"> <input type="file" @change="selectFile" style="position: abs......

hkaikai
今天
2
0
Spring Boot 2.0 项目实现自同步AD域账号

在通过Spring Boot的自动化装配功能及JDK自带的LDAP模块,可通过如下几个简单步骤实现业务系统自动同步AD域账号功能。 1. Java自带ldap搜索域账号信息核心代码: try { LdapContext ctx...

B超
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部