salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容

时间:2021-03-15 zero.zhang 人气:0

本篇参考：

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. 后台解析结果

总结：本篇还有很多待完善的地方，比如文件上传大小限制，可以参考上面曾经写过的博客。比如动态展示内容或者更友好的提示用户，以及内容传递到后台。这些感兴趣的小伙伴自行完善。篇中有错误地方欢迎指出，有不懂欢迎留言。

加载全部内容