Lightning component realizes simple excel download and parsing

• UpDownLoadEvent.evt

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="excelDataJson" type="List"/>
</aura:event>

• UpDownLoad.cmp

<aura:component>
    <!-- 加载层 -->
  <aura:attribute name="showSpinner" type="Boolean" default="false"/>
  <!-- excel表头中英文对照 -->
  <aura:attribute name="excelHeader" type="Map" default="{'HeaderA':'表头A','HeaderB':'表头B','HeaderC':'表头C'}"/>
  <!-- 导出的excel数据 -->
  <aura:attribute name="excelDataJson" type="List" default="[{'HeaderA':'AAA','HeaderB':'BBB','HeaderC':'CCC'}]"/>
  <!-- 导出excel文件名称 -->
  <aura:attribute name="fileName" type="String" default="导出文件"/>
  <!-- excel文件下载的label -->
  <aura:attribute name="downloadLabel" type="String" default="模板下载"/>
  <!-- 是否使用文件下载 -->
  <aura:attribute name="download" type="Boolean" default="true"/>
  <!-- 是否使用文件解析 -->
  <aura:attribute name="upload" type="Boolean" default="true"/>
  <!-- 注册事件,当文件发生变化时将excel文件的解析数据传回调用组件 -->
    <aura:registerEvent name="fileChange" type="c:UpDownLoadEvent" />
    <!-- 静态资源 -->
    <ltng:require scripts="{!join(',',$Resource.xlsx)}"/>
    <lightning:buttonGroup>
        <aura:if isTrue="{!v.upload}">
        <lightning:input aura:id="fileId" type="file" name="file" multiple="false" accept=".xls,.xlsx" variant="label-hidden" οnchange="{!c.upload}"/>
      </aura:if>
      <aura:if isTrue="{!v.download}">
        <lightning:button label="{!v.downloadLabel}" iconName="utility:download" iconPosition="left" οnclick="{!c.download}"/>
    </aura:if>
  </lightning:buttonGroup>
    <aura:if isTrue="{!v.showSpinner}">
      <lightning:spinner />
    </aura:if>
</aura:component>

• UpDownLoadController.js

({
    upload:function(cmp,event,helper)
  {
      var fileName='No File Selected..';
      if (event.getSource().get("v.files").length > 0) fileName = event.getSource().get("v.files")[0]['name'];
    if(fileName=='No File Selected..')
    {
      alert('请选择文件!');
      return;
    }
    helper.uploadHelper(cmp,event,helper);
  },
  download:function(cmp,event,helper)
  {
      var header={};
      var excelDataJson=cmp.get("v.excelDataJson");
    var fileName=cmp.get("v.fileName");
    var excelHeader=cmp.get("v.excelHeader");
    header.header=[];
    var jsonStr=JSON.stringify(excelDataJson);
    for(var key in excelHeader)
    { 
        jsonStr=jsonStr.replace(new RegExp(key,"g"),excelHeader[key]);
    }
    excelDataJson=JSON.parse(jsonStr);
    cmp.set("v.showSpinner", true);
      const ws = XLSX.utils.json_to_sheet(excelDataJson, header);
      ws["B1"].s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };
      const wopts = {bookType: 'xlsx', bookSST: false, type: 'binary'};//这里的数据是用来定义导出的格式类型
    const wb = {SheetNames: ['Sheet1'], Sheets: {}, Props: {}};
    wb.Sheets['Sheet1'] = ws;
    cmp.set("v.showSpinner", false);
    helper.saveAs(new Blob([helper.s2ab(XLSX.write(wb, wopts))], {type: "application/octet-stream"}),  fileName+'.' + (wopts.bookType == "biff2" ? "xls" : wopts.bookType));
  }
})

• UpDaownLoadHelper.js

({
    uploadHelper:function (cmp,event,helper) 
  {
    var file=cmp.find("fileId").get("v.files")[0];
    if(file)
    {
        cmp.set("v.showSpinner", true);
      var reader = new FileReader();
      reader.onload = function(e) {
        var workbook = XLSX.read(e.target.result, {type: 'binary'});
        var excelDataJson=JSON.stringify(XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]));
        var excelHeader=cmp.get("v.excelHeader");
        cmp.set("v.showSpinner", false);
        if(excelDataJson.length==0)
        {
            alert("无上传数据!");
              return;
        }       
        var jsonStr=JSON.stringify(excelDataJson);
        for(var key in excelHeader)
            { 
                jsonStr=jsonStr.replace(new RegExp(excelHeader[key],"g"),key);
            }
            excelDataJson=JSON.parse(jsonStr);            
            console.log(excelDataJson);
            helper.despatchFileChangeEvent(cmp,excelDataJson);
      };
      reader.onerror = function (e) {
        console.log("error reading file");
      };
      //文件加载结束的时候
      reader.onloadend = function (e) {
          console.log("onloadend");
      };
      reader.readAsBinaryString(file);
    }
  },
  despatchFileChangeEvent:function(cmp,excelDataJson){
    var compEvent = cmp.getEvent("fileChange");
    compEvent.setParams({ "excelDataJson": excelDataJson});
    compEvent.fire();
  },
  //下载导出文件
  saveAs:function (obj, fileName) 
  {
      console.log(obj);
      console.log(fileName);
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下载";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载
    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);
  },
  s2ab: function (s) { //字符串转字符流
    if (typeof ArrayBuffer !== 'undefined') {
      var buf = new ArrayBuffer(s.length);
      var view = new Uint8Array(buf);
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    } else {
      var buf = new Array(s.length);
      for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  },
})

• UpDaownLoad.css

.THIS .slds-file-selector__dropzone{ 
    background-color: white !important;
    border-color: white;
}
.THIS .slds-file-selector__dropzone .slds-file-selector__text{ 
    display: none;
}
.THIS #fileId
{
    border-color: white;
}

• xlsx.js静态文件

GitHub - SheetJS/sheetjs: SheetJS Community Edition -- Spreadsheet Data Toolkit

• 组件调用示例

调用方法：

<c:UpDownLoad excelHeader="{'HeaderA':'表头A','HeaderB':'表头B','HeaderC':'表头C'}" excelDataJson="[{'HeaderA':'AAA','HeaderB':'BBB','HeaderC':'CCC'}]" fileChange="{!c.fileChange}"/>

接收传回的JSON数据：

fileChange:function(cmp, event, helper) 
{
    var excelDataJson=event.getParam("excelDataJson");
    console.log(excelDataJson);
},

• 效果展示

点击模板下载：

点击上载文件（红色标记部分即为excel文件的解析结果，这个JSON数据可以传回到调用组件）: