专栏首页葡萄城控件技术团队只需3 分钟,就能创建一个SpreadJS的Vue项目
原创

只需3 分钟,就能创建一个SpreadJS的Vue项目

概述

SpreadJS纯前端表格控件 V11.2(SP2)版本已经全面支持了Vue拓展,下面我们看下如何配合VUE CLI,只需3分钟快速构建一个SpreadJS Vue工程。

安装vue-cli(耗时30S)

通过命令```npm install -g @vue/cli ```安装(https://cli.vuejs.org/

创建vue-spreadjs工程(耗时1Min)

请根据项目需求配置工程选项:

通过npm install 或者在package.json中添加引用的方式安装spread.sheets(耗时20S)

"@grapecity/spread-excelio": "^11.2.3",
"@grapecity/spread-sheets": "^11.2.3",
"@grapecity/spread-sheets-print": "^11.2.3",
"@grapecity/spread-sheets-resources-zh": "^11.2.3",
"@grapecity/spread-sheets-vue": "^11.2.3",

修改router/index.js为spreadJS页面添加router(耗时30S)

routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/spreadjs',
name: 'spreadJS',
component: SpreadJS
}
]

新建SpreadJS Component(耗时30S)

请在 components 下添加SpreadJS.vue文件

template 内容:

<template>
<div>
<h1>Spread.Sheets</h1>
<div>
<input type='file' @change="processFile($event)"/>
<button @click="importExcel">导入</button>
<button @click="exportExcel">导出</button>
<button @click="printWorkbook">打印</button>
</div>
<div style="text-align: left">
<gc-spread-sheets
hostClass='spread-host'
@workbookInitialized = 'workbookInitialized($event)'>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</div>
</template>

Style内容:

<style>
.spread-host {
width: 100%;
height: 400px;
border: 1px solid black;
}
</style>

Script内容:

<script>
/* eslint-disable */
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import "@grapecity/spread-sheets-resources-zh";
import ExcelIO from "@grapecity/spread-excelio";
import FaverSaver from "file-saver";
import "@grapecity/spread-sheets-print";
GC.Spread.Common.CultureManager.culture("zh-cn");
GC.Spread.Sheets.LicenseKey = ExcelIO.LicenseKey = "your key"
export default {
methods: {
processFile (event) {
this.excelFile = event.target.files[0];
},
importExcel () {
var excelIO = new ExcelIO.IO();
console.log(excelIO);
var self = this;
excelIO.open(this.excelFile, function(json) {
self.spread.fromJSON(json);
console.log(json);
});
},
exportExcel () {
var excelIO = new ExcelIO.IO();
var json = this.spread.toJSON();
excelIO.save(
json,
function(blob) {
FaverSaver.saveAs(blob, "export.xlsx");
},
function(e) {
console.log(e);
}
);
},
printWorkbook (){
this.spread.print();
},
workbookInitialized(spread) {
this.spread = spread;
spread.refresh();
}
}
}
</script>

workbookInitialized是spread初始化完成后的回调事件,我们可以在事件中得到初始化好的workbook对象。

部署授权需要同时给Sheets和ExcelIO同时添加,部署授权可以在全局config中配置。

运行项目(耗时10S)

创建 npm install 依赖后,即可通过npm start启动项目

浏览器访问 http://localhost:8081/#/spreadjs 查看效果。

只需3分钟,一个SpreadJS 的Vue项目就创建完成了,当然纯前端表格控件SpreadJS的强大不仅于此,去实际试用感受一下吧

扩展阅读

这篇文章,讲述的是《3分钟创建 SpreadJS 的 React 项目》,需要的同学请深入了解。

纯前端表格控件SpreadJS,是市面上布局与功能都与 Excel 高度类似的一款表格控件,全中文操作界面,适用于.NET、Java、移动端等多个平台的类 Excel 数据开发,备受华为、海信、立信、中国平安、中国能建、中通快递、金麒麟和北京神软等客户青睐。

关于葡萄城

赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。​

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【图解】Web前端实现类似Excel的电子表格

    本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线...

    葡萄城控件
  • WPF的消息机制(一)- 让应用程序动起来

    前言 谈起“消息机制”这个词,我们都会想到Windows的消息机制,系统将键盘鼠标的行为包装成一个Windows Message,然后系统主动将这些Window...

    葡萄城控件
  • Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

    在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

    葡萄城控件
  • ElasticSearch 使用 Logstash 从 MySQL 中同步数据

    目的是希望将现有的数据导入到 ElasticSearch 中,研究了好几种,除了写代码的方式,最简便的就是使用 Logstash 来导入数据到 ElasticS...

    皇上得了花柳病
  • numpy: np.argsort

    JNingWei
  • OSPF ABR Type 3 LSA

    Feature Overview The OSPF ABR Type 3 LSA Filtering feature extends the ability o...

    py3study
  • 中兴通讯寻求107亿美元贷款,提名新董事会成员

    据媒体报道,继昨天恢复交易后,中兴通讯希望筹集约107亿美元的资金,以试图使其业务恢复正常。

    SDNLAB
  • Symfony 3 框架+Elasticsearch

    目录src/AppBundle/Controller/SearchController.php

    Stanley Sun
  • 智能金融时代如何提升用户体验?中信银行有一个生动案例

    10月14日,中信银行联合腾讯云召开“语见·美好未来”发布会,中信银行手机银行推出智能语音服务产品,这是全国首个可以通过手机银行进行纯语音、全流程办理转账等金融...

    罗超频道
  • 教科书式的代码

    IT云清

扫码关注云+社区

领取腾讯云代金券