通过环境搭建和组件集成，咱们学会应用 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，代码如下图所示：
<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数据后，即应用fromJSON办法加载该文件。
let load = (e)=>{
let formData = new FormData();
formData.append("fileName", "path");
axios.post('spread/loadTemplate', formData, {
responseType: "json",
}).then((response) => {
if(response) {
alert("加载胜利");
templateJSON = response.data;
workbook.fromJSON(templateJSON);
}
}).catch((response) => {
alert("谬误");
})
}
· Update执行文件的更新。在设计器对加载的文件做些操作，如批改背景色、增加文本等，应用toJSON办法以后spread保留为json数据传递给后盾存储。
let update = (e)=>{
let spreadJSON = JSON.stringify(workbook.toJSON());
let formData = new FormData();
formData.append("jsonString", spreadJSON);
formData.append("fileName", "fileName");
axios.post('spread/updateTemplate', formData).then((response) => {
if(response) {
alert("更新胜利");
}
}).catch((response) => {
alert("谬误");
})
}
· Save办法执行将spread json导出为excel文件。
*//export SpreadJS 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);
});
性能扩大：数据透视表
SpreadJS内置了数据透视表性能，通过将其集成到我的项目中，便能够应用数据透视表，该表反对排序、过滤等条件格局，能够按不同维度剖析数据，并且能够自定义主题。
SpreadJS 的数据透视表反对两种格局的数据源:
· 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);
通过切换路由能够看到 SpreadJS 与在线表格编辑器能够失常切换显示。在编辑器中批改加载的Excel文件，点击工具栏“更新”按钮，再切换至SpreadJS组件，点击“加载”按钮便能够看到方才所批改的文件已被更新。
示例代码
· Vue3 集成 SpreadJS 组件 Demo下载
以上就是在Vue 3中集成SpreadJS与在线表格编辑器的全部内容，除了 Vue ，SpreadJS 还能够原生的形式嵌入各类利用（桌面软件、app、web），并与各类前后端技术框架（java、.NET、JavaScript、Vue、React 等）相结合。
通过集成 SpreadJS ，开发者可研发出高性能的公式计算、在线导入导出 Excel 文档、数据透视表和可视化剖析性能，为零碎使用者提供灵便易用的用户体验。
扩大浏览
· Vue 3 组件开发实战：搭建基于SpreadJS的表格编辑零碎（环境搭建篇）
· Vue 3 组件开发实战：搭建基于SpreadJS的表格编辑零碎（组件集成篇）
· SpreadJS Vue 框架反对
发表回复