1. 程式人生 > >純前端解析excel檔案

純前端解析excel檔案

    專案需要,前端解析簡單的excel檔案,查找了網上的文章資料,加上按實際需要修改,寫出來供大家參考。

    專案是vue的,先安裝xlsx,這個不用多說,npm install xlsx就完事了。

    然後需要在元件中引入一下。

<input @change="getUploadFile" type="file">

    我專案中的這個匯入用的是原生input輸入框。簡潔明瞭。如果覺得樣式醜,可以搞個div用定位寫在同樣的位置,把input設個透明就好了。jquery的更簡單,trigger簡直不要太好用。

    下面是重點,拿到匯入的檔案,然後解析。為了讓大家看的清楚,我把他們都寫在input的change事件中了。

            getUploadFile (e) {
                //拿到所匯入檔案的名字
                let fileName = e.target.files[0]
                //定義reader,存放檔案讀取方法
                let reader = new FileReader()
                //啟動函式
                reader.readAsBinaryString(fileName)
                //onload在檔案被讀取時自動觸發
                reader.onload = function(e) {
                    //workbook存放excel的所有基本資訊
                    let workbook = XLSX.read(e.target.result, {type: 'binary'})
                    //定義sheetList中存放excel表格的sheet表,就是最下方的tab
                    let sheetList = workbook.SheetNames
                    //存放json陣列格式的表格資料
                    let resultJson = []
                    //存放字串陣列格式的表格資料
                    let resultFormulae = []
                    sheetList.forEach(function(y) {
                        let worksheet = workbook.Sheets[y]
                        let json = XLSX.utils.sheet_to_json(workbook.Sheets[y])
                        let formulae = XLSX.utils.sheet_to_formulae(workbook.Sheets[y])
                        if(json.length > 0){
                            //具體如何處理看專案需求,我的專案其實只有一個sheet,在這裡寫成迴圈避免大家誤會
                            //資料處理與存放
                            resultJson.push(json)
                            resultFormulae.push(formulae)
                        }

                    });
                    //因為我的表格只有一列,因此我取出resultJson第一組資料的key作為鍵去遍歷取出手機號碼
                    let tableHeader = Object.keys(result[0])[0]
                    let importInfo = result.map((item) => {
                        return item[tableHeader]
                    })

                };
            }

    貼出幾個關鍵資料:

從上到下依次為:

    console.log(resultJson)

    console.log(resultFormulae)

    console.log(tableHeader)

    console.log(importInfo)

    無論小夥伴們用的是什麼庫和框架,所依賴的js庫都是xlsx.js,有的需要直接引入js,有的需要需要像我這樣安裝依賴包,所以我這裡主要展示的是xlsx這個庫的使用方法,至於如何引入因專案而宜了。