如何创建SpreadJS的Vue项目？这篇文章教你3分钟搞定！

概述

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

1. 安装vue-cli（耗时30 S）

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

2. 创建 vue-spreadjs 工程（耗时 1 Min）

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

3. 通过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",

4. 修改 router/index.js 为 spreadJS 页面添加 router（耗时 30 S）

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

5. 新建 SpreadJS Component（耗时 30 S）

请在 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-sheetshostClass='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 中配置。

6. 运行项目（耗时 10 S）

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

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

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS，可满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填 、在线文档、图表公式联动、类 Excel UI 设计等业务场景，并在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成中无需大量代码开发和测试，极大降低了企业研发成本和项目交付风险。

购正版SpreadJS 表控件授权限时优惠！最高立减万元！点击了解更多优惠

如果您对我们的产品还有任何疑问，欢迎咨询在线客服>>