纯前端表格控件SpreadJS教程：3 分钟如何快速构建一个 SpreadJS Vue 工程

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

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这些功能惊艳到！赶快下载体验吧！咨询客服获取更多教程资讯>>