1. SheetJS IE호환성 문제 해결

Rendez·2019년 11월 21일
0

UseOpenLib

목록 보기
1/1

문제점

  1. 현재 구버전 IE에서는 FileReaderreadAsBinaryString을 지원하지 않습니다.

  2. 현재 구버전 IE에서는 charCodeAt, slice Method를 지원하지 않습니다.

해결방법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() {
//			}

			

		});
	}
);
profile
SAP 개발 MHKIM

0개의 댓글