Datei-Uploader - Excel-Datei hochladen und in JSON konvertieren und an die Tabelle binden

Question

Nach dem Hochladen der Excel-Datei auf file uploader Kontrolle in Sapui5 wird Excel-Datei in JSON mit folgendem Code konvertiert.

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); 
    }; 
    }, 

Hinweis: Ich habe jszip.js und xlsx.js Bibliothek verwendet, um JSON zu konvertieren Excel

Jetzt in result Variable I JSON format Daten immer bin, und diese Daten Ich habe binden an den Tisch.

Das Problem ist, JSON binding mit table arbeitet gut mit dem Chrome, Firefox neuesten Browser, aber es ist nicht in IE 11 Browser arbeiten oder es ist nur No data in Tabelle zeigt

Gibt es eine andere file reader Methode, die IE11 unterstützt?

Answer 1

Ja, antworte ich habe .. Ich readAsArrayBuffer Methode in Javascript gefunden, die auch

meine Arbeits Code Hier ist in IE11 für alle aktuellen Browser-kompatibel ist. XML-Code:

<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-Code:

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 
     }); 
    } 

Danach fügen Sie die 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

die Sie interessieren, ohne externe Bibliothek:

/* In die Funktion "Drücken" */

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'); 
      } 

Grüße.

Answer 3

Überprüfen Sie den Code in meinem Kern Upload_CSV.js

Dieses in der Steuerung die Datei mit JS Client-Seite

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 

zu analysieren, wenn ich nicht beantworten Sie mir bitte sagen