salesforce lightning零基礎學習(十七) 實現上傳 Excel解析其內容

本篇參考：

我們都知道salesforce支援對csv的解析，但是有時客戶還是想堅持使用excel的格式進行上傳然後解析，標準肯定實現不了，這個時候我們需要使用第三方的解析外掛來搞定此需求，常用的比較多的是使用 excel sheet js。本篇demo用於通過使用 sheet js進行簡單的解析展示操作。

先說一下基本原理：

1. 通過 FileReader將上傳的檔案進行解析；

2. 通過 sheet js包裡得XLSX.read方法進行 excel裡面內容的格式化；

3. 解析相關的sheet頁裡面的內容。

做lightning專案，如果我們想要使用標準的DOM API，第一步，也是最關鍵的，我們需要先知道 lightning locker支援哪些標準的 DOM API，比如第一步我們想要通過 FileReader去讀取內容，我們需要先了解 lex下是否支援 FileReader。
通過下面圖片內容我們知道lex是支援的，所以沒有了後顧之憂，我們開始進行簡單實現。

一. 上傳需要的 static resource

我們訪問https://github.com/SheetJS/sheetjs下載下來 code的資源包以後，在dist目錄下我們可以使用xlsx.core.min.js 或者使用 xlsx.full.min.js，demo中我們使用後者。這裡有一點需要注意，我們不能直接使用這個js，否則引用程式以後，他是會報錯的類似XLSX is not defined sheet js，按照下圖進行修改

demo中我們正常的上傳了 static resource，命名為 sheetJS,對應的檔案為修改後的xlsx.full.min.js

二. 程式碼實現

excelImportForAura.cmp：引入static resource，展示一個 lightning input用於上傳

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!$Resource.sheetJS}"/>
    <lightning:input type="file"
                     label="上傳"
                     onchange="{!c.excelFileToJson}"
                     multiple="false"
                     accept="xlsx"/>
</aura:component>

對應js controller：主要就是用包裡面的XLSX.utils.sheet_to_json去搞定，可以檢視官方API。

({
    excelFileToJson: function(component, event, helper) {
        event.preventDefault();
        let files = event.getSource().get("v.files");
        let fileReader = new FileReader();
        let datas = []; // 儲存獲取到的資料
        let workbook;
        fileReader.onload = function(event) {
            try {
                let data = event.target.result,
                workbook = XLSX.read(data, {
                    type: 'binary'
                });
                for (let sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        datas = datas.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }
                console.log(JSON.stringify(datas));
            } catch (e) {
                console.log('解析失敗' + e);
                return;
            }
        };
        fileReader.readAsBinaryString(files[0]);
    }
})

結果簡單展示

1. 測試excel內容

2. 後臺解析結果

總結：本篇還有很多待完善的地方，比如檔案上傳大小限制，可以參考上面曾經寫過的部落格。比如動態展示內容或者更友好的提示使用者，以及內容傳遞到後臺。這些感興趣的小夥伴自行完善。篇中有錯誤地方歡迎指出，有不懂歡迎留言。

salesforce lightning零基礎學習(十七) 實現上傳 Excel解析其內容

相關文章