취업/PHP

php 배열로 만들어 자바스크립트 단에 객체 전달하기(feat. excel변환)

카슈밀 2021. 7. 22. 16:39
반응형

오늘의 후기.

서버 두번 뻗게 만들어서 한소리 들었다.

PHP 문제부분이 기존에는 백엔드 측에서 데이터를 만들어서 줬는데,

이번에는 SQL문 자체를 가져와 내가 배열->객체로 넘겨주는 부분에서 발생했다.

원래는 dataTable을 사용하여 해당 부분을 sheet.js를 통해서 excel을 만들었는데,

테이블 보이는 게 10개고 실제 1,2,3페이지 이렇게 구성되어 있으면 보이는 10개만 excel 파일로 만들어주는 것이 문제였다.

 

원인은 3번 예시인 html table를 사용했더니 발생한 문제였다.

말 그대로 화면에 보여지는 부분이 10개니 그냥 tag에서 10개만 있다고 뽑아오는 것이 문제.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sheetjs create xlsx excel example(html table)</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script>
//공통
// 참고 출처 : https://redstapler.co/sheetjs-tutorial-create-xlsx/
function s2ab(s) { 
    var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
    var view = new Uint8Array(buf);  //create uint8array as viewer
    for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
    return buf;    
}
function exportExcel(){ 
    // step 1. workbook 생성
    var wb = XLSX.utils.book_new();

    // step 2. 시트 만들기 
    var newWorksheet = excelHandler.getWorksheet();
    
    // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
    XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());

    // step 4. 엑셀 파일 만들기 
    var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

    // step 5. 엑셀 파일 내보내기 
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}
$(document).ready(function() { 
    $("#excelFileExport").click(function(){
        exportExcel();
    });
});
</script>
<script>
var excelHandler = {
        getExcelFileName : function(){
            return 'table-test.xlsx';
        },
        getSheetName : function(){
            return 'Table Test Sheet';
        },
        getExcelData : function(){
            return document.getElementById('tableData'); 
        },
        getWorksheet : function(){
            return XLSX.utils.table_to_sheet(this.getExcelData());
        }
}
</script>
</head>
<body>
<table id="tableData" style="border:1px solid #dddddd">
<thead>
<tr>
    <th>이름</th>
    <th>CP</th>
</tr>
</thead>
<tbody>
<tr>
    <td>망나뇽</td>
    <td>4000</td>
</tr>
<tr>
    <td>마기라스</td>
    <td>3900</td>
</tr>
<tr>
    <td>해피너스</td>
    <td>3800</td>
</tr>
</tbody>
</table>
파일 내보내기(HTML TABLE) : <input type="button" id="excelFileExport" value="엑셀 파일 다운로드(TABLE)" />
</body>
</html>

https://eblo.tistory.com/84

 

SheetJS : JS로 엑셀 파일 쓰기 예제

예전에 UI에서 간단하게 엑셀 파일을 내보내는 것을 해봤습니다. 그때는 그것만으로도 서버쪽 호출 안하고 간단하게 처리할 수 있어 좋아했는데 SheetJS는 배열, json, html 형태 등 다양한 형태의 데

eblo.tistory.com

그래서 dataTable의 export 기능을 쓰려다가 아무리해도 'datatable excel button not showing' 이라는 상황.

그래서 mysql을 한번 더 돌리고 그랬더니 서버가 뻗어서...

에러로그를 삭제 후 재진행.

또 뻗어서 한소리 들었다.

도저히 view페이지에서 작업이 안되리라고 판단.

다른 page를 사용하여 해당 값을 가져오는 것을 진행.

 

ajax로 해당 페이지에 날짜의 범위를 던지면, 그 응답값을 가져와서 array로 해당 값을 넣고,

array_push로 해당 부분을 추가후 echo json_encode했다.

단순히 array를 다른 페이지로 전달하려면 var_dump나 var_export로는 해당 배열이 넘어가지 않는다.

var_dump나 var_export는 그냥 단순히 string타입으로 넘기기만 한다.

그냥 화면에 출력할때 쓰는 부분이다.

입력값 내부가 안보일때 체크 하는 부분.

이걸 몰라서 고생했다.

배열은 무조건 다른 페이지로 전달하려면 json값으로 변경시켜서 넘겨야 한다.

while ($row) {
  $dateTime =date("Y-m-d H:i", strtotime($row['reg_date']));
  $count = number_format($row['amount'], 8);
  $add = array('종류 '=>'구매', '유저번호'=>$row['id'], '이메일'=>$row['email'], '상품'=> $row['product'], '수량'=>$count, '시간'=>$dateTime);
  array_push($arr1, $add);
}
echo json_encode($arr1);

그렇게 넘어온 json값을 2번 예시인 요걸로 넘기면 그냥 바로 excel로 다운로드가 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sheetjs create xlsx excel example(json)</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script>
//공통
// 참고 출처 : https://redstapler.co/sheetjs-tutorial-create-xlsx/
function s2ab(s) { 
    var buf = new ArrayBuffer(s.length); //convert s to arrayBuffer
    var view = new Uint8Array(buf);  //create uint8array as viewer
    for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF; //convert to octet
    return buf;    
}
function exportExcel(){ 
    // step 1. workbook 생성
    var wb = XLSX.utils.book_new();

    // step 2. 시트 만들기 
    var newWorksheet = excelHandler.getWorksheet();
    
    // step 3. workbook에 새로만든 워크시트에 이름을 주고 붙인다.  
    XLSX.utils.book_append_sheet(wb, newWorksheet, excelHandler.getSheetName());

    // step 4. 엑셀 파일 만들기 
    var wbout = XLSX.write(wb, {bookType:'xlsx',  type: 'binary'});

    // step 5. 엑셀 파일 내보내기 
    saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), excelHandler.getExcelFileName());
}
$(document).ready(function() { 
    $("#excelFileExport").click(function(){
        exportExcel();
    });
});
</script>
<script>
var excelHandler = {
        getExcelFileName : function(){
            return 'json-test.xlsx';
        },
        getSheetName : function(){
            return 'Json Test Sheet';
        },
        getExcelData : function(){
            return [{'상품명':'삼성 갤럭시 s11' , '가격':'200000'}, {'상품명':'삼성 갤럭시 s12' , '가격':'220000'}, {'상품명':'삼성 갤럭시 s13' , '가격':'230000'}]; 
        },
        getWorksheet : function(){
            return XLSX.utils.json_to_sheet(this.getExcelData());
        }
}
</script>
</head>
<body>
파일 내보내기(JSON) : <input type="button" id="excelFileExport" value="엑셀 파일 다운로드(JSON)" />
</body>
</html>

 

내게 도움을 준 코드

https://pythonq.com/so/php/28905

 

php - PHP 배열을 JavaScript 함수에 전달 [중복] - IT 툴 넷

This question already has answers here: How do I pass variables and data from PHP to JavaScript?                                                                      (20 답변)      

pythonq.com

 

728x90
저작자표시 비영리 변경금지

'취업 > PHP' 카테고리의 다른 글

[php] input Datetime-local에 자바스크립트 제이쿼리 value 구현  (0) 2021.10.01
[php] 테이블 tbody에 스크롤 기능 추가하기.  (0) 2021.09.07
[php] for문 echo == 쓰면 ="="되는 증상.  (0) 2021.07.14
[php] Select Box option value throw at current php  (0) 2021.07.13
[SQL] mysqli php 특정 열에 접근하기.  (0) 2021.07.12

'취업/PHP'의 다른글

  • 현재글php 배열로 만들어 자바스크립트 단에 객체 전달하기(feat. excel변환)

관련글

댓글

티스토리툴바