[JAVA%JAVASCRIPT] 엑셀 업로드 기능 구현

pom.xml에 의존성 주입

  <dependency>
                <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.11</version>
            </dependency>
            <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.11</version>
         </dependency>

 

<---- HTML ---->

<div id="btnExcelUpload" class="btn btn-primary btn-sm mr-2" style="float: right;">엑셀업로드</div>

 

HTML dialog 부분

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

엑셀 업로드 다운로드를 위한 라이브러리 (필수)

 

<-------JQUERY-------->

 

            //-------------------------------------------------------------
            // 엑셀 업로드 이벤트
            //-------------------------------------------------------------
            $('#btnExcelUpload').click(function() {
                 $( "#excel_upload" ).dialog( "open" );
            });
            
            $("#excel_upload").dialog({
                 autoOpen: false,
                 width: 400,
                 buttons: [
                 {
                     text: "확인",
                     click: function() {
                     $( this ).dialog( "close" );
                         
                     $.ajax({
                                  url : "<c:url value='/uploadProductExcel.do'/>",
                                  type: 'POST',
                                  data: JSON.stringify(arrMcc016),
                                  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                                  context:this,
                                  dataType:'json',
                                  beforeSend:function(){
                                    // 필요시
                                  },
                                  success: function(data) {
                                      // 적절한 필요한 코드 넣으면 됨
                                  },
                                  error: function(request, status, error){
                                      // 적절한 필요한 코드 넣으면 됨
                                  },
                                  complete:function(){
                                      // 필요시
                                  }
                             });
                     }
                 },
                 {
                    text: "취소",
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
                ]
            });

 

javascript

XLSX.utils.sheet_to_json(sheet)를 var sheetData에 넣고 반복문

XLSX.utils.sheet_to_json(sheet)를 하게되면 엑셀에 1행부터 보고 갖고온다

예시 엑셀화면

 

XLSX.utils.sheet_to_json(sheet,{raw:false}) : 날짜데이터가 이상하게 나온다면 추가해 보자

예시 엑셀화면

XLSX.utils.sheet_to_json(sheet,{range:1}) : 2행부터 조회

 

상품명, 상품약어는 sheetData[i]["상품명"] 이렇게 갖고 올 수 있지만

품번코드 
[수정불가]  ALT+ENTER로 줄바꿈이 된 데이터는 sheetData[i]["품번코드\r\n수정불가"] \r\n을 추가해주면서 갖고 올 수 있다.

controller

한글데이터를 URLDecoder.decode로 String temp로 저장

문자열 형식의 데이터를 JSONArray로 가공 //JSONArray.fromObject(temp);

반복문을 통한 insert 또는 update 작업

select로 기본키로 조회해 없으면 insert , 있으면 update 작업

 

엑셀 업로드 기능 구현 vo속성이 integer나 double이면 

obj.setPriceSale(Integer.valueOf(map.get("priceSale")==null?"0":String.valueOf(map.get("priceSale"))));

이런식으로 String to Integer로 바꿔주면 된다.