문제점
-
현재 구버전 IE에서는
FileReader의readAsBinaryString을 지원하지 않습니다. -
현재 구버전 IE에서는
charCodeAt,sliceMethod를 지원하지 않습니다.
해결방법1. Browser를 구분해서 처리하는 경우
isVersionIe변수를 지정해 브라우저 별로 구분해서 처리하는 방법이 있습니다.
아래는 readAsBinaryString, readAsArrayBuffer 두가지 모두 사용하는 방법입니다.
MainController.js
sap.ui.define([
"com/up/controller/BaseController",
"sap/ui/model/json/JSONModel",
"com/up/util/utils"
], function (BaseController, JSONModel, utils) {
"use strict";
return BaseController.extend("com.up.controller.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @public
*/
onInit : function () {
},
onChangeFUP : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]); // FileUploader 객체에 있는 Excel File을 추출하여 _import함수로 넘깁니다.
},
_import : function(file) {
// Browser 종류를 확인합니다.
let isVersionIe = false || !!document.documentMode;
if (file && window.FileReader) {
var reader = new FileReader(); // HTML5에서 제공하는 File Reader 객체를 생성합니다.
var oTable = this.getView().byId("table"); // Excel을 Parsing하여 보여줄 Table 객체를 얻어냅니다.
// File Reader객체의 onload Event Handler를 구현합니다.
reader.onload = function(oFile) {
//IE를 위한 Pre-Process
if (isVersionIe) {
var binary = "";
var bytes = new Uint8Array(oFile.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var workbook = XLSX.read(binary, { type: 'binary' }); // reader객체의 readAsArrayBuffer메소드의 인자로 넘어온 Excel화일을 읽습니다.
} else {
var workbook = XLSX.read(oFile.target.result, { type: 'binary' }); // reader객체의 readAsBinaryString메소드의 인자로 넘어온 Excel화일을 읽습니다.
}
var oModel = new JSONModel(); // Parsing한 Excel자료를 저장할 JSON 모델객체를 생성합니다.
// Excel화일에는 1개 이상의 Sheet가 존재할 수 있으므로 Sheet 수만큼 반복합니다..
workbook.SheetNames.forEach(function(sheetName) {
// Parsing된 Excel 자료를 JSON모델에 Sheet명으로 저장합니다.
oModel.setProperty("/" + sheetName, XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]));
});
// Table 객체에 JSON모델을 셋팅합니다.
oTable.setModel(oModel);
// JSON모델에 저장되어 있는 Property중 Sheet1을 Table에 Binding합니다.
oTable.bindRows("/Sheet1");
};
if (isVersionIe) {
reader.readAsArrayBuffer(file); //IE전용
} else {
reader.readAsBinaryString(file); //IE제외
}
}
},
downloadExcel : function(tableId, oModel) {
var mainModel, listTable, filename;
listTable = this.getView().byId("table");
mainModel = listTable.getModel();
filename = "File";
utils.makeExcel(mainModel, listTable,filename);
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
*/
// onBeforeRendering: function() {
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
*/
// onAfterRendering: function() {
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
// onExit: function() {
// }
});
}
);해결방법2. Browser 구분없이 처리하는 경우(권장)
브라우저 구분없이 readAsArrayBuffer를 사용하여 처리하는 방법입니다.
MainController.js
sap.ui.define([
"com/up/controller/BaseController",
"sap/ui/model/json/JSONModel",
"com/up/util/utils"
], function (BaseController, JSONModel, utils) {
"use strict";
return BaseController.extend("com.up.controller.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @public
*/
onInit : function () {
},
onChangeFUP : function(e) {
this._import(e.getParameter("files") && e.getParameter("files")[0]); // FileUploader 객체에 있는 Excel File을 추출하여 _import함수로 넘깁니다.
},
_import : function(file) {
if (file && window.FileReader) {
var reader = new FileReader(); // HTML5에서 제공하는 File Reader 객체를 생성합니다.
var oTable = this.getView().byId("table"); // Excel을 Parsing하여 보여줄 Table 객체를 얻어냅니다.
// File Reader객체의 onload Event Handler를 구현합니다.
reader.onload = function(oFile) {
var binary = "";
var bytes = new Uint8Array(oFile.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
var workbook = XLSX.read(binary, { type: 'binary' });
var oModel = new JSONModel(); // Parsing한 Excel자료를 저장할 JSON 모델객체를 생성합니다.
// Excel화일에는 1개 이상의 Sheet가 존재할 수 있으므로 Sheet 수만큼 반복합니다..
workbook.SheetNames.forEach(function(sheetName) {
// Parsing된 Excel 자료를 JSON모델에 Sheet명으로 저장합니다.
oModel.setProperty("/" + sheetName, XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]));
});
// Table 객체에 JSON모델을 셋팅합니다.
oTable.setModel(oModel);
// JSON모델에 저장되어 있는 Property중 Sheet1을 Table에 Binding합니다.
oTable.bindRows("/Sheet1");
};
reader.readAsArrayBuffer(file);
}
},
downloadExcel : function(tableId, oModel) {
var mainModel, listTable, filename;
listTable = this.getView().byId("table");
mainModel = listTable.getModel();
filename = "File";
utils.makeExcel(mainModel, listTable,filename);
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
*/
// onBeforeRendering: function() {
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
*/
// onAfterRendering: function() {
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
// onExit: function() {
// }
});
}
);
SAP 개발 MHKIM