新人必看!手把手教你如何使用瀏覽器表格插件(下)

摘要:本文由葡萄城技術團隊於博客園原創並首發。轉載請註明出處:葡萄城官網,葡萄城爲開發者提供專業的開發工具、解決方案和服務,賦能開發者。

前言 | 問題背景

作爲一名優秀的打工人,Excel是大家上班中必不可少的辦公軟件。隨着互聯網時代的到來,越來越多的公司開始使用各種B/S系統來處理表格數據文件。那麼有沒有一種可以直接在瀏覽器中使用的Excel插件去處理數據呢?答案是肯定的。本文小編將爲大家介紹如何在Vue框架中集成在線表格插件(以下簡稱爲“SpreadJS”)和在線表格編輯器(類Excel瀏覽器插件)實現在瀏覽器中使用Excel插件來處理數據。

在本教程中,我們將使用node.js,請確保已安裝最新版本,除此之外還需要使用軟件Visual Studio Code(以下簡稱“VSCode”)作爲編程環境,請您以管理員身份運行它。

上一篇文章(《新人必看!手把手教你如何使用瀏覽器表格插件(上)》)小編爲大家介紹瞭如何在Vue框架中集成表格插件(SpreadJS),本篇小編將繼續爲大家介紹如何在Vue中集成在線表格編輯器。

如何在Vue框架中集成在線表格編輯器(designer)

在Vue中集()成在線表格編輯器:

本節內容小編將爲大家介紹Vue框架中如何集成在線表格編輯器和如何實現使用編輯器實現表格數據綁定。

Vue集成在線表格編輯器和SpreadJS的方法相似,首先引入需要集成到Vue中的資源,其次使用styleInfo標籤和designerInitialized設置表格的大小(使用方法與Vue集成SpreadJS一樣,具體可以參考第一篇文章)。

import {defineComponent} from "Vue"

// SpreadJS核心資源

import GC from "@grapecity/spread-sheets"

// 形狀資源

import "@grapecity/spread-sheets-shapes"

// 二維碼資源

import "@grapecity/spread-sheets-barcode"

// 圖表資源

import "@grapecity/spread-sheets-charts"

// 文件IO相關資源

import "@grapecity/spread-excelio"

// 打印資源 打印資源要在pdf之前

import "@grapecity/spread-sheets-print"

// 導出pdf相關資源

import "@grapecity/spread-sheets-pdf"

// 透視表相關資源

import "@grapecity/spread-sheets-pivot-addon"

// 集算表相關資源

import "@grapecity/spread-sheets-tablesheet"

// 組件運行時樣式信息

import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"

// 組件運行時語言資源

import "@grapecity/spread-sheets-resources-zh"

// 設計器資源,設計器資源要在設計器核心資源之前

import "@grapecity/spread-sheets-designer-resources-cn"

// 設計器核心資源

import \* as GcDesigner from "@grapecity/spread-sheets-designer"

// 設計器css

import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"

// 設計器對Vue的支持資源

import Designer from "@grapecity/spread-sheets-designer-Vue"

import {bindFile} from "../files/bindFile"

import {bindSchema,generateData} from "../files/bindTree.js"
                                           (Vue引入在線表格編輯器的資源)

實現數據綁定:

爲了更形象、具體的描述數據綁定,小編將用一個簡單的小案例爲大家介紹在SpreadJS中數據綁定是如何實現的。

實現需求:通過SpreadJS實現一個簡單的蘋果銷售量的數據表格。數據表格中的數據可以通過數據文件實現將數據回顯到數據表格中。下面是具體實現的方法步驟:

(1)設計可視化表格:

使用spreaeJs表格設計器拉拽設計出一個表格如下圖所示(和Excel創建表格的方法一樣,不詳細介紹)。

                                             (初始化一個Excel表格)

除了SpreadJS可視化方法創建表格之外,小編再爲大家再介紹一種使用數據文件實現表格的方法:

在提供的源碼資源中包含了兩個數據文件bindFile.js和bindTree.js,而bindFile.js文件則是上圖表格的Json文件格式,使用spread.fromJSON(bindFile)方法可以讀取bindFile.js文件中的內容並顯示到頁面上。

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加載文件(第一步)

spread.fromJSON(bindFile)

}
                                           (讀取bindFile.js文件的代碼)

(2)創建工作表:

設計完可視化表格之後就是創建數據表來存儲數據,創建工作表也可以分爲可視化創建工作表和數據文件實現工作表,由於可視化設計工作表操作比較簡單,小編在這裏不作詳細介紹。下面主要介紹如何通過代碼實現數據表:使用designer的setData方法讀取bindTree.js文件中的bindSchema(數據表的Json格式)並加載到SpreadJS的頁面中。

//第二步綁定數據綁定表信息(designer初始化完成之後,加載右側Tree)

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))
                                         (實現創建工作表的代碼)

(3)實現數據綁定:

設計完工作表之後,下面將介紹如何通過代碼和數據文件實現數據綁定:

首先去調用bindTree.js文件中的generateData方法生成隨機數據,然後使用

GC.Spread.Sheets.Bindings.CellBindingSource方法去生成綁定的數據源,再將綁定的數據源放到初始化的活動頁sheet中,最後去加載數據。具體實現代碼如下:

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加載文件(第一步)

spread.fromJSON(bindFile)

//第三步綁定數據

// mock數據

let data = generateData(20)

// 生成綁定數據源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 獲取當前活動sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 獲取sheet中的目標表格,並將表格的數據設置爲隨數據量自動縱向擴展

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加載數據

sheet.setDataSource(source)

}
                                          (實現數據綁定的代碼)

將上面的步驟代碼合在一起之後的整體代碼如下所示:

/

/綁定數據信息(第二步)

const initDesigner = (designerEntity:GcDesigner.Spread.Sheets.Designer.Designer) =\> {

designer = designerEntity

customeConfig(designer)

//第二步綁定數據綁定表信息(designer初始化完成之後,加載右側Tree)

designer.setData("treeNodeFromJson",JSON.stringify(bindSchema))

designer.setData("oldTreeNodeFromJson",JSON.stringify(bindSchema))

designer.setData('updatedTreeNode',JSON.stringify(bindSchema))

let spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook

loadBindData(spread)

}

const loadBindData = (spread:GC.Spread.Sheets.Workbook) =\> {

// 加載文件(第一步)

spread.fromJSON(bindFile)

//第三步綁定數據

// mock數據

let data = generateData(20)

// 生成綁定數據源

let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)

// 獲取當前活動sheet

let sheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet

// 獲取sheet中的目標表格,並將表格的數據設置爲隨數據量自動縱向擴展

let table = sheet.tables.findByName('report_card')

table.expandBoundRows(true)

// 加載數據

sheet.setDataSource(source)

}

return{

styleInfo,initDesigner

}
                                                 (整體流程的代碼)

(最終效果圖)

做完這些之後便可以在瀏覽器中體驗和使用在線編輯器了(高度類似Excel操作)。

備註:

整理的完整源碼附文章下方day2文件夾中的vue3-spreadJS-ts文件,直接在終端中使用npm run dev指令運行即可。

源碼鏈接:https://pan.baidu.com/s/1ddz8UCuDeVZEIvXiff70xw 密碼:dnpx

總結

這兩篇文章爲大家詳細的介紹了SpreadJS在Vue框架中使用的方法和具體的作用,希望可以幫助大家在學習SpreadJS的道路上可以起到幫助。

更多參考資料:

本文對應的視頻教程

表格控件技術資料文檔

>>>>擴展資料:

在線Excel表格文檔版本管理的設計和實現 - 葡萄城技術博客 (grapecity.com.cn)

提高工作效率的神器:基於 SpreadJS 實現Chrome Excel擴展插件 - 葡萄城技術博客 (grapecity.com.cn)

類Excel表格控件SpreadJS應用場景 —— 企業所得稅申報系統的分析與解決方案 - 葡萄城技術博客 (grapecity.com.cn)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章