Copyright © 2018-2022 All Rights Reserved.
了解最新技术文章
基于环境建设和组件集成，我们建立了一个基础 Vite 在线表编辑系统原型。
本章将带领您继续扩展 Vue 3 本项目原型实现了数据绑定、模板文件导入/更新/导出、数据透视表等功能。本章的实现思路与上一篇文章基本相似。
同时创建设计思路Spread 和Designer两个组件，通过切换路由来显示不同的组件类型。将加载和更新两个按钮添加到编辑器组件的工具栏中。点击加载从服务器中加载Excel在编辑器中修改文件，点击更新按钮，将修改后的文件传输给服务器。切换路由显示 Spread 在组件中添加组件 两个加载和更新button，功能同上。
Spread 组件介绍
Spread 是一款基于 HTML5 的原生JavaScript组件，兼容 450 种以上的 Excel 提供高度相似的公式 Excel 主要用于开发 Web Excel 组件架构符合多人协同编辑、高性能模板设计、数据填充等功能模块UMD各种应用可以原生方式嵌入规范，并结合前后端技术框架。
与 Vue 3 进行集成
首先在components/ SpreadSheet.vue中集成Spread，代码如下图所示：
```
<template>
<div>
<div ref="ssHost" style="height:700px;width:100%;text-align: left;"></div>
</div>
</template>
<script>
import { onMounted, ref} from "vue";
import "../../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import GC from "@grapecity/spread-sheets"
export default {
name: 'SpreadSheets',
props: {
},
setup(props, {emit}) {
const ssHost = ref(null);
onMounted(() => {
var workbook = new GC.Spread.Sheets.Workbook(ssHost.value);
emit("workbookInitialized", workbook)
});
return {
ssHost
};
}
}
</script>
```
步骤如下：
在模板中添加一个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数据后，即使用fromON加载该文件的方法。```
let load = (e)=>{
let formData = new FormData();
formData.append("fileName", "path");
axios.post('spread/loadTemplate', formData, {
responseType: "json",
}).then((response) => {
if(response) {
alert("；成功加载");
templateON = response.data;
workbook.fromON(templateON);
}
}).catch((response) => {
alert("错误");
})
}
```
Update更新执行文件。在设计器中操作加载的文件，如修改背景颜色、添加文本等。toON方法当前spread保存为json数据传输到后台存储。```
let update = (e)=>{
let spreadON = ON.stringify(workbook.toON());
let formData = new FormData();
formData.append("jsonString", spreadON);
formData.append("fileName", "fileName");
axios.post('spread/updateTemplate', formData).then((response) => {
if(response) {
alert("；更新成功");
}
}).catch((response) => {
alert("错误");
})
}
```
Save方法执行将spread json导出为excel文件。```
//export Spread json to excel file
excelio.save(json, function (blob) {
//do whatever you want with blob
//such as you can save it
}, function (e) {
//process error
console.log(e);
});
```
功能扩展：数据透视表Spread内置数据透视表功能，通过集成到项目中，可以使用数据透视表，支持排序、过滤等条件格式，可以根据不同维度分析数据，并定制主题。
Spread 数据透视表支持两种格式的数据源：
table name: 数据透视表使用表格的名称来获取数据源。range formula: 数据透视表使用工作表的范围公式来获取数据，这必须是工作表的绝对路径。
使用数据透视表时，需要将以下链接添加到文档的开始部分：
```
<head>
...
<script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script>
<script src='.../spreadjs/plugins/gc.spread.pivot.x.x.x.min.js' type='text/javascript'></script>
</head>
```
使用表格名称创建数据透视表：
let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
let sheet1 = spread.getSheet(0);
let sheet2 = spread.getSheet(1);
sheet1.setRowCount(250);
let table = sheet.tables.add('table1', 0, 0, 200, 200);
sheet1.setArray(0, 0, pivotSales);
let pivotTable = sheet2.pivotTables.add("PivotTable", "table1", 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);
```
还可以使用工作表的范围公式创建数据透视表：
```
let range = "=Sheet2!A1:D4";
let pivotTable = sheet2.pivotTables.add("PivotTable", range, 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2);
```
通过切换路由可以看到 Spread 可与在线表格编辑器正常切换显示。修改和加载编辑器Excel单击工具栏更新按钮，然后切换到文件Spread单击加载按钮查看刚刚修改的文件已更新。
示例代码Vue3 集成 Spread 组件 Demo下载
以上就是在Vue 3中集成Spread除了在线表格编辑器的所有内容外， Vue ，Spread 各种应用(桌面软件，app、web），并配合各种前后端技术框架（java、.NET、JavaScript、Vue、React 等）相结合。
通过集成 Spread ，开发者可研发出高性能的公式计算、在线导入导出 Excel 文档、数据透视表和可视化分析功能，为系统使用者提供灵活易用的用户体验。
扩展阅读Vue excel - Spread|纯前端表格控件|可嵌入系统开发的在线Excel - 葡萄城官网
售前咨询专员
