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

本篇參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

https://github.com/SheetJS/sheetjs

salesforce零基礎學習（八十九）使用 input type=file 以及RemoteAction方式上傳附件

我們都知道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. 后台解析結果

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