最近因工作需要正在学习spreadJs，spreadJs是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件，以“高速低耗、纯前端、零依赖、可嵌入任何操作系统”为产品特色，同时满足 .NET、Java、响应式 Web 应用及移动跨平台的表格数据处理和类 Excel 的表格应用开发，为用户提供更快捷、更安全、更熟悉的表格数据处理方式和更友好的类 Excel 操作体验。
项目框架是基于vue的vue-element-admin，spreadJs可以通过以下两种方式与Vue一起使用：
- 使用Nuget Package Manager(NPM)
- 使用传统HTML
在这里我使用的是第一种方式，话不多说，上干货。
1. 通过npm install 或者在package.json中添加引用的方式安装spread.sheets
我是用npm install方法进行包安装，获取的版本是12.0.9
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-vue
2. 获取到完整包后，项目直接运行npm run dev
在执行过程中，有可能会遇到下面的报错信息
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
解决方案：在webopack增加如下配置
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
3. 新建vue文件
template部分
<template>
<div class="app-container">
<gc-spread-sheets
hostClass='spread-host'
@workbookInitialized = 'workbookInitialized($event)'>
<gc-worksheet :data-source="tableData" :auto-generate-columns="autoGenerateColumns">
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
style部分
<style scoped>
.spread-host {
width: 100%;
height: 800px
}
</style>
javascript部分
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-vue'
export default {
data() {
return {
// 表格的数据源
tableData: []
}
},
// 初始化表格数据
created() {
this.tableData = [
['1', 'TOM'],
['2', 'JACK'],
['3', 'JAMES']
]
},
methods: {
// workbookInitialized是spread初始化完成后的回调事件，我们可以在事件中得到初始化好的workbook对象
workbookInitialized(spread) {
this.spread = spread
this.sheetsFilter()
spread.refresh()
}
}
}
</script>
至此，spreadJs的表格已搭建完成，可在浏览器中查看效果，后面我会接着介绍表格的应用。
