本章將帶領(lǐng)大家繼續(xù)擴(kuò)展 Vue 3 這個(gè)項(xiàng)目原型，實(shí)現(xiàn)數(shù)據(jù)綁定、模板文件導(dǎo)入/更新/導(dǎo)出和數(shù)據(jù)透視表等功能。

設(shè)計(jì)思路

• 同時(shí)創(chuàng)建SpreadJS和Designer（表格編輯器）兩個(gè)組件，用切換路由的方式顯示不同組件類型。
• 在編輯器組件的工具欄中增加“加載”和“更新”兩個(gè)按鈕。
• 點(diǎn)擊“加載”即可加載從服務(wù)器獲取的Excel文件，在編輯器中對(duì)該組件做一些修改，點(diǎn)擊“更新”按鈕，將修改后的文件傳遞給服務(wù)器。
• 切換路由顯示 SpreadJS 組件，在該組件添加“加載”和“更新”兩個(gè)button，功能同上。

SpreadJS 組件介紹

SpreadJS是一款基于 HTML5 的原生JavaScript組件，兼容 450 種以上的 Excel 公式，提供高度類似 Excel 的功能，主要用于開發(fā) Web Excel 組件，實(shí)現(xiàn)多人協(xié)同編輯、高性能模板設(shè)計(jì)和數(shù)據(jù)填報(bào)等功能模塊，組件架構(gòu)符合UMD規(guī)范，可以以原生的方式嵌入各類應(yīng)用，并與前后端技術(shù)框架相結(jié)合。

下載SpreadJS最新版

集成 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>  

具備步驟如下：

1. 在模板中添加一個(gè)div，這個(gè)div就是spread的容器，可以通過css設(shè)置容器的寬高位置等，也就是自定義了spread的顯示大小及位置。
2. 導(dǎo)入此組件所需要的依賴。
3. 在setup方法中新建一個(gè)spread。
4. 在views/ SpreadSheet.vue中引入該組件及相關(guān)依賴。

   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'  

5. 在模板中使用該組件標(biāo)簽

   <template>  <div>      <button @click="load($event)">加載</button>      <button @click="update($event)">更新</button>      <SpreadSheets v-on:workbookInitialized="workbookInitialized"></SpreadSheets>  </div>  </template>  

6. 在setup函數(shù)中初始化spread。

   let workbook = undefined;  let workbookInitialized=(wb)=>{      workbook = wb      }  

功能擴(kuò)展：Excel 文檔導(dǎo)入/更新/導(dǎo)出

 Excel 文檔的導(dǎo)入/更新/導(dǎo)出功能可通過自定義“加載”、“更新”和“導(dǎo)出”按鈕實(shí)現(xiàn)，在SpreadSheet組件中添加自定義按鈕的思路，與上篇designer組件的設(shè)計(jì)思路一致：

• Load方法執(zhí)行excel文件的加載，接收到后臺(tái)傳遞的json數(shù)據(jù)后，即使用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("錯(cuò)誤");          })      }  

• Update執(zhí)行文件的更新。在設(shè)計(jì)器對(duì)加載的文件做些操作，如修改背景色、添加文本等，使用toJSON方法當(dāng)前spread保存為json數(shù)據(jù)傳遞給后臺(tái)存儲(chǔ)。

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("錯(cuò)誤");          })      }  

• Save方法執(zhí)行將spread json導(dǎo)出為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);      });  

功能擴(kuò)展：數(shù)據(jù)透視表

SpreadJS內(nèi)置了數(shù)據(jù)透視表功能，通過將其集成到項(xiàng)目中，便可以使用數(shù)據(jù)透視表，該表支持排序、過濾等條件格式，可以按不同維度分析數(shù)據(jù)，并且可以自定義主題。

SpreadJS 的數(shù)據(jù)透視表支持兩種格式的數(shù)據(jù)源:

• table name: 數(shù)據(jù)透視表使用一個(gè)表格的名字去獲取數(shù)據(jù)源。
• range formula: 數(shù)據(jù)透視表使用工作表的一個(gè)范圍公式獲取數(shù)據(jù)，這個(gè)范圍公式必須是工作表的絕對(duì)路徑。

若使用數(shù)據(jù)透視表，需要添加如下鏈接到文檔的開始部分：

    <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>  

使用一個(gè)表格的名稱去創(chuàng)建數(shù)據(jù)透視表：

    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);  

也可使用工作表的一個(gè)范圍公式創(chuàng)建數(shù)據(jù)透視表：

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文件，點(diǎn)擊工具欄“更新”按鈕，再切換至SpreadJS組件，點(diǎn)擊“加載”按鈕便可以看到剛才所修改的文件已被更新。

示例代碼

• Vue3 集成 SpreadJS 組件 Demo下載

以上就是在Vue 3中集成SpreadJS與在線表格編輯器的全部?jī)?nèi)容，除了 Vue ，SpreadJS 還可以原生的方式嵌入各類應(yīng)用（桌面軟件、app、web），并與各類前后端技術(shù)框架（java、.NET、JavaScript、Vue、React 等）相結(jié)合。

通過集成 SpreadJS ，開發(fā)者可研發(fā)出高性能的公式計(jì)算、在線導(dǎo)入導(dǎo)出 Excel 文檔、數(shù)據(jù)透視表和可視化分析功能，為系統(tǒng)使用者提供靈活易用的用戶體驗(yàn)。