轉(zhuǎn)帖|使用教程|編輯:莫成敏|2020-04-20 14:39:13.537|閱讀 1879 次
概述:本文使用SpreadJS表格控件,實現(xiàn)了在線讀取、編輯Excel 文檔的功能,下載附件的示例代碼,按照Readme文檔中的步驟可運行前后端代碼。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,兼容 450 種以上的 Excel 公式,具有 “高性能、跨平臺、與 Excel 高度兼容”的產(chǎn)品特性。在帶來親切的 Excel 使用體驗的同時,滿足 Web Excel 組件開發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報、Excel 類報表設(shè)計等業(yè)務(wù)場景,極大降低了企業(yè)研發(fā)成本和項目交付風險。
本文使用SpreadJS表格控件,實現(xiàn)了在線讀取、編輯Excel 文檔的功能,下載附件的示例代碼,按照Readme文檔中的步驟可運行前后端代碼。
進入后頁面:
單擊文件,右側(cè)會顯示文件信息:
雙擊文件夾會進入文件夾:
雙擊文件會進入編輯文件的彈框:
可以對文件進行修改、刪除操作:
技術(shù)棧:
后端主要采用了:SpringBoot
前端主要采用了:Vue ElementUI Typescript
快速運行項目: 下載附件代碼,前后臺詳細運行步驟在Readme中有介紹,此處不再贅述。
接下來介紹實現(xiàn)該功能的關(guān)鍵步驟:
相關(guān)依賴包都寫在package.json里,執(zhí)行命令 npm install 即可安裝,主要有:
在 SpreadJS.vue文件中引入 SpreadJS 相關(guān)安裝包:
在App.vue文件中引入 SpreadJS 樣式文件、中文資源文件:
List.vue文件中是主要的頁面邏輯,雙擊文件時彈出彈框,彈框中引入了自定義的組件:
mySpread變量中是從后臺返回的文件流,傳給MySpreadJS 組件,子組件接收到數(shù)據(jù)后,調(diào)用excelIO.open方法打開Excel 文件流,
可以在線編輯Excel文件,并保存,excelIO.save方法可以將修改后的文件流傳給后臺,實現(xiàn)文件的修改功能
后臺接口介紹:
獲取某路徑下的文件集合:getfolder
參數(shù)
是否必須
說明
path
是
文件夾路徑
獲取Excel文件內(nèi)容:getFile
參數(shù)
是否必須
說明
filePath
是
文件路徑
保存文件:savefile
參數(shù)
是否必須
說明
filePath
是
文件路徑
type
是
create 創(chuàng)建文件,update 更新文件
excelFile
是
Excel文件流
刪除文件:deletefile
本文內(nèi)容到這里就結(jié)束了,希望對您有所幫助~您可以下載SpreadJS試用版免費體驗~或者點擊下方鏈接下載示例代碼!
參數(shù)
是否必須
說明
filePath
是
文件路徑
相關(guān)內(nèi)容:
使用SpreadJS實現(xiàn)在線 Excel 文檔 Demo(示例代碼)
盤點 SpreadJS 2020最新實用資源,助力快速上手純前端表格控件!
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自: