當前位置:首頁 » 網頁前端 » 前端從後端拿excel文件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端從後端拿excel文件

發布時間: 2023-07-09 15:44:34

前端、後台對excel表格的處理

這樣的需求需要通過一些專業的類Excel控制項來完成,這些類Excel控制項一般都會有Excel表格展示的功能,在您的系統頁面中嵌入上控制項之後頁面中就會初始化一個Excel表格,之後控制項一般都會將Excel的相關功能全部封裝成對應的API,例如Excel的導入,導出,公式,圖表,形狀,單元格操作等。之後根據需求需要用到哪些調用相應的API就可以完成了。

所以你上面說的讀進用戶的Excel,其實就是導入功能,求和就是公式相關操作的一種,提取列的數據就是正常的單元格操作的其中一種。

如果你是前端導入的話,這里推薦使用SpreadJS,這個是一個純前端的類Excel控制項,可以用JavaScript語言實現上述所有的功能。

② 前端怎麼實現導出excel內容是數值

在web開發中,有一個經典的功能,就是數據的導入導出。特別是數據的導出,在生產管理或者財務系統中用的非常普遍,因為這些系統經常要做一些報表列印的工作。而數據導出的格式一般是EXCEL,我這里就給大家介紹下^_^。
首先我們來導出EXCEL格式的文件吧。現在主流的操作Excel文件的開源工具有很多,用得比較多的就是Apache的POI及JExcelAPI。這里用Apache POI!先去Apache的大本營下載POI的jar包:http://poi.apache.org/
開啟分步閱讀模式
工具材料:
Eclipse
操作方法
01
首先進入poi的官網,下載需要的jar包,如圖所示,下載zip包

02
其次,將下載的zip包解壓,並將根目錄、lib目錄和ooxml-lib目錄下的jar包放入工程目錄的lib文件中(下一步會說明具體位置)。

03
然後,新建javaweb項目,例如poi-micro項目,將上面的jar包復制到poi-micro\WebContent\WEB-INF\lib目錄下,實際上上面的jar包放在本機的固定文件夾中即可,在build path時倒入進去就OK了。

04
導出的excel表格的每一行可抽象成一個實體類,例如,導出學生信息excel表格,則一行記錄表示一個學生的信息。以此為例,則需要新建學生實體類Student,如圖示。該類有一些屬性兩個構造方法和get/set方法組成。

05
下面,編寫導出excel表格的功能實現類了,為了該類具有通用型,使用泛型和反射機制,安裝屬性的順序輸出實體類的屬性信息。

06
最後編寫測試方法,在main方法中新建幾個學生對象,調用上面的excel表格導出類的方法即可。

07
最終的導出excel表格如圖示。

③ 如何實現SpreadJS的純前端Excel導入導出

  • 導入

導入時使用excelio的open方法,在successCallBack回掉中我們可以獲取到Spread.Sheets的JSON對象。

  • 導出

導出時使用save方法,傳遞json對象,在successCallBack中會獲得一個Excel文件的blob對象。您可以在前段通過使用FileSaver.js直接保存Excel,也可將blob提交伺服器處理。

具體的代碼實現,請參考下面的博客

http://blog.gcpowertools.com.cn/post/spreadsheetsv10-clientside-excelio.aspx

④ 在vue中,實現純前端讀取和展示excel文件

本項目使用vue Element
使用的插件:XLSX
需要在項目猛春孝中安裝依賴 npm install XLSX
excel表格要枝稿放在src/森畝static目錄下