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