概述

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 的强大不仅于此，去实际试用感受一下吧

扩展阅读

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