通过环境搭建和组件集成，我们学会使用 Vite 和 SpreadJS ，将在线Excel的编辑功能集成在Vue 3项目中。

本章，我将带领大家继续扩展 Vue 3 这个项目原型，实现数据绑定、模板文件导入/更新/导出和数据透视表等功能，本章的实现思路与上一篇“组件集成”基本类似。

设计思路

· 同时创建SpreadJS 和Designer（表格编辑器）两个组件，用切换路由的方式显示不同组件类型。

· 在编辑器组件的工具栏中增加“加载”和“更新”两个按钮。

· 点击“加载”即可加载从服务器获取的Excel文件，在编辑器中对该组件做一些修改，点击“更新”按钮，将修改后的文件传递给服务器。

· 切换路由显示 SpreadJS 组件，在该组件添加 “加载”和“更新”两个button，功能同上。

SpreadJS 组件介绍

SpreadJS是一款基于 HTML5 的原生JavaScript组件，兼容 450 种以上的 Excel 公式，提供高度类似 Excel 的功能，主要用于开发 Web Excel 组件，实现多人协同编辑、高性能模板设计和数据填报等功能模块，组件架构符合UMD规范，可以以原生的方式嵌入各类应用，并与前后端技术框架相结合。

集成 SpreadJS 组件

首先在components/ SpreadSheet.vue中集成SpreadJS，代码如下图所示：

1<template>
2
3  <div>
4
5    <div ref="ssHost" style="height:700px;width:100%;text-align: left;"></div>
6
7  </div>
8
9</template>
10
11<script>
12
13import { onMounted, ref} from "vue";
14
15import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
16
17import GC from "@grapecity/spread-sheets"
18
19export default {
20
21  name: 'SpreadSheets',
22
23  props: {
24
25  },
26
27  setup(props, {emit}) {
28
29    const ssHost = ref(null);
30
31    onMounted(() => {
32
33      var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
34
35      emit("workbookInitialized", workbook)
36
37    });
38
39    return {
40
41      ssHost
42
43    };
44
45  }
46
47}
48
49</script>
50

具备步骤如下：

在模板中添加一个div，这个div就是spread的容器，可以通过css设置容器的宽高位置等，也就是自定义了spread的显示大小及位置。
导入此组件所需要的依赖。
在setup方法中新建一个spread。
在views/ SpreadSheet.vue中引入该组件及相关依赖。

import SpreadSheets from '../components/SpreadSheets.vue'

import {ref} from "vue"

import axios from "axios"

import GC from '@grapecity/spread-sheets'

import ExcelIO from '@grapecity/spread-excelio'
在模板中使用该组件标签
<template>
<div>

<button @click="load($event)">加载</button>

<button @click="update($event)">更新</button>

<SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>

</div>
</template>
在setup函数中初始化spread。

let workbook = undefined;

let workbookInitialized=(wb)=>{

workbook = wb

}

功能扩展： Excel 文档导入/更新/导出

Excel 文档的导入/更新/导出功能可通过自定义“加载”、“更新”和“导出”按钮实现，在SpreadSheet组件中添加自定义按钮的思路，与上篇designer组件的设计思路一致：

· Load方法执行excel文件的加载，接收到后台传递的json数据后，即使用fromJSON方法加载该文件。

1let load = (e)=>{
2
3        let formData = new FormData();
4
5        formData.append("fileName", "path");
6
7        axios.post('spread/loadTemplate', formData, {
8
9            responseType: "json",
10
11        }).then((response) => {
12
13            if(response) {
14
15                alert("加载成功");
16
17                templateJSON = response.data;
18
19                workbook.fromJSON(templateJSON);
20
21            }
22
23        }).catch((response) => {
24
25            alert("错误");
26
27        })
28
29    }
30

· Update执行文件的更新。在设计器对加载的文件做些操作，如修改背景色、添加文本等，使用toJSON方法当前spread保存为json数据传递给后台存储。

1let update = (e)=>{
2
3        let spreadJSON = JSON.stringify(workbook.toJSON());
4
5        let formData = new FormData();
6
7        formData.append("jsonString", spreadJSON);
8
9        formData.append("fileName", "fileName");
10
11        axios.post('spread/updateTemplate', formData).then((response) => {
12
13            if(response) {
14
15                alert("更新成功");
16
17            }
18
19        }).catch((response) => {
20
21            alert("错误");
22
23        })
24
25    }
26

· Save方法执行将spread json导出为excel文件。

1  *//export SpreadJS json to excel file*
2
3 excelio.save(json, **function** (blob) {
4
5  *//do whatever you want with blob*
6
7  *//such as you can save it*
8
9 }, **function** (e) {
10
11  *//process error*
12
13  console.log(e);
14
15 });
16

功能扩展：数据透视表

SpreadJS内置了数据透视表功能，通过将其集成到项目中，便可以使用数据透视表，该表支持排序、过滤等条件格式，可以按不同维度分析数据，并且可以自定义主题。

SpreadJS 的数据透视表支持两种格式的数据源:

· table name: 数据透视表使用一个表格的名字去获取数据源。

· range formula: 数据透视表使用工作表的一个范围公式获取数据，这个范围公式必须是工作表的绝对路径。

若使用数据透视表，需要添加如下链接到文档的开始部分：

1  <head>
2
3  <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js'  type='text/javascript'></script>
4
5  <script src='.../spreadjs/plugins/gc.spread.pivot.x.x.x.min.js'  type='text/javascript'></script>
6
7  </head>
8

使用一个表格的名称去创建数据透视表：

1    let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
2    let sheet1 = spread.getSheet(0);
3    let sheet2 = spread.getSheet(1);
4    sheet1.setRowCount(250);
5    let table = sheet.tables.add('table1', 0, 0, 200, 200);
6    sheet1.setArray(0, 0, pivotSales);
7    let pivotTable = sheet2.pivotTables.add("PivotTable", "table1", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);
8

也可使用工作表的一个范围公式创建数据透视表：

1let range = "=Sheet2!A1:D4";
2let pivotTable = sheet2.pivotTables.add("PivotTable", range, 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);
3