1. SheetJS IE호환성 문제 해결

y46028911·2019년 11월 21일
0

UseOpenLib

목록 보기
1/1

문제점

  1. 현재 구버전 IE에서는 **FileReader**의 **readAsBinaryString**을 지원하지 않습니다.

  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개의 댓글