通過環境搭建和組件集成，我們學會使用 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組件，點擊“加載”按鈕便可以看到剛纔所修改的文件已被更新。
示例代碼
以上就是在Vue 3中集成SpreadJS與在線表格編輯器的全部內容，除了 Vue ，SpreadJS 還可以原生的方式嵌入各類應用（桌面軟件、app、web），並與各類前後端技術框架（java、.NET、JavaScript、Vue、React 等）相結合。
通過集成 SpreadJS ，開發者可研發出高性能的公式計算、在線導入導出 Excel 文檔、數據透視表和可視化分析功能，爲系統使用者提供靈活易用的用戶體驗。
擴展閱讀
· Vue 3 組件開發實戰：搭建基於SpreadJS的表格編輯系統（環境搭建篇）