概述
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-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 中配置。
6. 运行项目(耗时 10 S)
创建 npm install 依赖后,即可通过npm start启动项目
浏览器访问 http://localhost:8081/#/spreadjs 查看效果。
只需 3 分钟,一个 SpreadJS 的 Vue 项目就创建完成了,当然纯前端表格控件 SpreadJS 的强大不仅于此,去实际试用感受一下吧!
纯前端表格控件SpreadJS,可满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景,并在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成中无需大量代码开发和测试,极大降低了企业研发成本和项目交付风险。
本文转载自葡萄城