Question

在sapui5中的file uploader控件上上传excel文件后，使用以下代码将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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

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

试试这个，没有外部库：

/ *在功能＆＃34;按＆＃34; * /

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

如果我没有回答你，请告诉我

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

3 个答案: