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

Zero-Zhang

发布于 2021-03-17 16:04:12

1.3K0

发布于 2021-03-17 16:04:12

文章被收录于专栏：salesforce零基础学习

本篇参考：

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进行简单的解析展示操作。

先说一下基本原理：

通过 FileReader将上传的文件进行解析；
通过 sheet js包里得XLSX.read方法进行 excel里面内容的格式化；
解析相关的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]);
    }
})

结果简单展示