最近因工作需要正在学习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的表格已搭建完成，可在浏览器中查看效果，后面我会接着介绍表格的应用。

在vue中搭建spreadJs