文件上传器 - 上传excel文件并将其转换为JSON并绑定到表格

Question

在sapui5中上传excel文件file uploader控件后，使用以下代码将excel文件转换为JSON。

handleExcelUpload : function(e) { 
    this._import(e.getParameter("files") 
       && e.getParameter("files")[0]); 
}, 
    _import : function(file) { 
    if (file && window.FileReader) { 
     var reader = new FileReader(); 
     that = this; 
     result = {}; 
     var data; 
     reader.onload = function(e) { 
     var data = e.target.result; 
     var wb = XLSX.read(data, { 
      type : 'binary' 
     }); 
     wb.SheetNames 
     .forEach(function(sheetName) { 
      var roa = XLSX.utils 
      .sheet_to_row_object_array(wb.Sheets[sheetName]); 
      if (roa.length > 0) { 
      result[sheetName] = roa; 
      } 
     }); 
     }; 
     reader.readAsBinaryString(file); 
    }; 
    }, 

注意：我已经使用jszip.js和xlsx.js库转换Excel中JSON

现在result可变我得到JSON format数据，这些数据我有绑定表。

的问题是，JSON binding与table工作正常与Chrome, Firefox最新的浏览器，但它不是在IE 11浏览器工作，或者它显示在表中只有No data

是否有支持IE11任何其他file reader方法？

Answer 1

是的，我得到了回答。我发现在Javascript readAsArrayBuffer方法，它甚至在IE11

这是我工作的代码是所有最新的浏览器兼容。 XML代码：

<FileUploader id="fileUploader" name="myFileUpload" 
          class="sapUiSmallMarginEnd" uploadUrl="upload/" width="400px" 
          tooltip="Upload your file to the local server" uploadComplete="handleUploadComplete" 
          change="handleExcelUpload" placeholder="Please Select File" /> 

JS代码：

handleExcelUpload : function(e) { 
    this._import(e.getParameter("files") 
       && e.getParameter("files")[0]); 
}, 
    _import : function(file) { 
    debugger; 
    if (file && window.FileReader) { 
     var reader = new FileReader(); 
     that = this; 
     //result = {}; 
     //var data; 
     reader.onload = function(evt) { 
     var data = evt.target.result; 
     //var xlsx = XLSX.read(data, {type: 'binary'}); 
     var arr = String.fromCharCode.apply(null, new Uint8Array(data)); 
     var xlsx = XLSX.read(btoa(arr), {type: 'base64'}); 
     result = xlsx.Strings; 
     result = {}; 
     xlsx.SheetNames.forEach(function(sheetName) { 
      var rObjArr = XLSX.utils.sheet_to_row_object_array(xlsx.Sheets[sheetName]); 
      if(rObjArr.length > 0){ 
      result[sheetName] = rObjArr; 
      } 
     }); 
     return result; 
     that.b64toBlob(xlsx, "binary"); 
     }; 
     reader.readAsArrayBuffer(file); 

    }; 
    }, 
    b64toBlob : function(b64Data, contentType) { 
     contentType = contentType || ''; 
     var sliceSize = 512; 
     b64Data = b64Data.replace(/^[^,]+,/, ''); 
     b64Data = b64Data.replace(/\s/g, ''); 
     var byteCharacters = Base64.decode(b64Data); 
     var byteArrays = []; 

    for (var offset = 0; offset < byteCharacters.length;offset += sliceSize){  
     var slice = byteCharacters.slice(offset, offset + sliceSize); 

     var byteNumbers = new Array(slice.length); 
     for (var i = 0; i < slice.length; i++) { 
      byteNumbers[i] = slice.charCodeAt(i); 
     } 

     var byteArray = new Uint8Array(byteNumbers); 
     byteArrays.push(byteArray); 
     } 
     var blob = new Blob(byteArrays, { 
     type : contentType 
     }); 
    } 

这后增添base64 UTIL

var Base64 = {}; // Base64 namespace 

Base64.code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 

Base64.encode = function(str, utf8encode) { 
    utf8encode = (typeof utf8encode == 'undefined') ? false : utf8encode; 
    var o1, o2, o3, bits, h1, h2, h3, h4, e=[], pad = '', c, plain, coded; 
    var b64 = Base64.code; 

    plain = utf8encode ? Utf8.encode(str) : str; 

    c = plain.length % 3; 
    if (c > 0) { while (c++ < 3) { pad += '='; plain += '\0'; } } 

    for (c=0; c<plain.length; c+=3) { 
    o1 = plain.charCodeAt(c); 
    o2 = plain.charCodeAt(c+1); 
    o3 = plain.charCodeAt(c+2); 

    bits = o1<<16 | o2<<8 | o3; 

    h1 = bits>>18 & 0x3f; 
    h2 = bits>>12 & 0x3f; 
    h3 = bits>>6 & 0x3f; 
    h4 = bits & 0x3f; 

    e[c/3] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4); 
    } 
    coded = e.join(''); 
    coded = coded.slice(0, coded.length-pad.length) + pad; 

    return coded; 
} 

Base64.decode = function(str, utf8decode) { 
    utf8decode = (typeof utf8decode == 'undefined') ? false : utf8decode; 
    var o1, o2, o3, h1, h2, h3, h4, bits, d=[], plain, coded; 
    var b64 = Base64.code; 

    coded = utf8decode ? Utf8.decode(str) : str; 

    for (var c=0; c<coded.length; c+=4) { 
    h1 = b64.indexOf(coded.charAt(c)); 
    h2 = b64.indexOf(coded.charAt(c+1)); 
    h3 = b64.indexOf(coded.charAt(c+2)); 
    h4 = b64.indexOf(coded.charAt(c+3)); 

    bits = h1<<18 | h2<<12 | h3<<6 | h4; 

    o1 = bits>>>16 & 0xff; 
    o2 = bits>>>8 & 0xff; 
    o3 = bits & 0xff; 

    d[c/4] = String.fromCharCode(o1, o2, o3); 
    // check for padding 
    if (h4 == 0x40) d[c/4] = String.fromCharCode(o1, o2); 
    if (h3 == 0x40) d[c/4] = String.fromCharCode(o1); 
    } 
    plain = d.join(''); // join() is far faster than repeated string concatenation in IE 

    return utf8decode ? Utf8.decode(plain) : plain; 
} 

Answer 2

试试这个，无需外部库：

/*在功能“Press”*/

var file = oFileUploader.getFocusDomRef().files[0]; 

      if (file && window.FileReader) { 

       var reader = new FileReader(); 
       var that = this; 

       reader.onload = function(e) { 

        var strCSV = e.target.result; 
        var arrCSV = strCSV.replace(/['",]/g, '').split(/[↵\n]+/).join(';').split(';'); 
        var noOfCols = 11; // 11 Columns 
        var hdrRow = arrCSV.splice(0, noOfCols); 

        var oData = []; 

        while (arrCSV.length > 0) { 

         var obj = {}; 
         var row = arrCSV.splice(0, noOfCols) 

         if (row.length > 1) { 

          for (var i = 0; i < row.length; i++) obj[hdrRow[i].replace(/\r/g, "")] = row[i].trim(); 

          oData.push(obj) // Data Json 

         } 

        } 

        oTable.setModel(new sap.ui.model.json.JSONModel(oData)); // Binding model 
       }; 

       reader.readAsText(file, 'ISO-8859-1'); 
      } 

问候。

Answer 3

检查代码在我的要点 Upload_CSV.js

将这个控制器使用JS客户端

var fU = this.getView().byId("idfileUploader"); 
    var domRef = fU.getFocusDomRef(); 
    var file = domRef.files[0]; 
    var reader = new FileReader(); 
    var params = "ItemsJson="; 
    reader.onload = function(oEvent) { 
     var strCSV = oEvent.target.result; 
     var arrCSV = strCSV.match(/[\w .]+(?=,?)/g); 
     var noOfCols = 3; 
     var headerRow = arrCSV.splice(0, noOfCols); 
     var data = []; 
     while (arrCSV.length > 0) { 
      var obj = {}; 
      var row = arrCSV.splice(0, noOfCols); 
      for (var i = 0; i < row.length; i++) { 
       obj[headerRow[i]] = row[i].trim(); 
      } 
      data.push(obj); 
    } 
    data.reverse(); 
    var json = JSON.stringify(data); // send to the backend 

解析文件，如果我不回答你，请告诉我