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

前言

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文件:

总结

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

node读取文件进阶(详解)

刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访...

9120
来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

17440
来自专栏程序生活

Python爬虫系列(六)外国图库Unsplash图片自动化下载

再做一个网站,要找一些高清图片,然后同学推荐了这个网站:Unsplash 。但是每张图片下载要手动点,然后下拉加载更多图片,效率不高,所以自己写了爬虫程序,进...

62990
来自专栏极乐技术社区

微信小程序开发详解《三》APP生命周期

1:微信小程序APP的生命周期方法: 在微信小程序工程中的app.js中增加如图所示方法 ? 编译运行,查看日志如图所示:微信小程序启动时,调用生命周期方法为:...

241100
来自专栏郭少华

(第四季)Vue实例和内置组件

概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vu...

9010
来自专栏owent

Webpack+vue+boostrap+ejs构建Web版GM工具

Web前端的组件技术刷新真的是日新月异,前段时间看到很多童鞋分享了webpack的使用,刚好之前做我们游戏里Web版的GM工具的时候正在想怎么用简单的方式,做模...

56920
来自专栏Java 技术分享

Ajax 学习总结

38470
来自专栏前端人人

React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

59930
来自专栏云计算教程系列

在CentOS上用Caddy安装WordPress

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

95140
来自专栏听雨堂

web中的水晶报表 "出现通信错误。将停止打印"

被这个问题快折腾死,死活都找不到原因,找了一堆解答,无外乎这几种情况,但都不管用 在Page_Init中绑定数据。无效。 activex控件的版本,我试过10....

20290

扫码关注云+社区

领取腾讯云代金券