728x90
반응형
SMALL
웹에서 export로 csv 파일로 다운로드 하는 경우가 많이 생긴다.
이번에는 jquery로 간단하게 csv파일로 다운로드 하는방법을 알아보자.
위 이미지와 같은 웹이 있을 경우 export 버튼을 csv파일로 내보내도록하자.
우선 버튼이 어떻게 만들어 졌는지 보면
<div class="div_button_wrap">
<div id="export_button" onclick="downloadCSV()">export</div>
</div>export 버튼을 누르면 downloadCSV()함수를 호출한다.
그럼 downloadCSV() 구조를 보자.
function downloadCSV() {
const fileName = "userList.csv";
const csv = convertNodeToCsvString();
var link = document.createElement("a");
var blob = new Blob(["\uFEFF"+csv], {type: 'text/csv; charset=utf-8'});
var url = URL.createObjectURL(blob);
$(link).attr({"download" : fileName , "href" : url});
link.click();
}파일이름은 userList.csv로 지정해 줬다.
covertNodeToCsvString() 함수로 csv 포멧으로 만들어 줄 것이다.
function convertNodeToCsvString() {
var result = "";
var node = $(".div_table_title").children();
$(node).each(function (index, value) {
result += $(value).text() + ",";
})
result += "\n";
var itemNodes = $(".div_table_list").children();
$(itemNodes).each(function (index, value) {
result += $(value).find(".row_no").text() +",";
result += $(value).find(".row_name").text() +",";
result += $(value).find(".row_gender").text() +",";
result += $(value).find(".row_phone").text() +",\n";
})
return result;
}csv는 ,로 구분하고 \n으로 행을 바꾼다.
우선 제목부분으로 행을 만들고 줄바꿈을 해준다.
그다음은 이제 데이터 부분을 만들어준다.
blob = new Blob은 Binary Large Objects의 약자 대용량 바이너리 객체라고 생각하면 된다.
더 쉽게 파일같은 데이터를 배열로 담아주는 역활을 한다.
'\uFEFF' + csv는 어떤의미를 할까?
쉽게 말하면 인코딩 식별자라고 생각하면 될 것 같다.
자세히 설명을 하기 위해선 BOM부터 조금 깊게 설명이 필요하지만
여기서는 스킵하도록한다.
그 외 코드는 blob 객체를 url로 만들고 a태그에 attributes를 줘서 강제로 클릭시 켜서 다운로드 하게 하는 방법이다.
마지막으로 전체소스 코드와 함꼐 마무리 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>csv 파일 export</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<style>
.div_table {
display : flex;
flex-direction : column;
width : 1200px;
position : absolute;
transform : translate(-50%, -50%);
top : 50%;
left : 50%;
}
.item_row,
.div_table_title {
display : flex;
height : 50px;
line-height : 50px;
border-bottom : 1px solid #C1C1C1;
}
.div_table_title {
border-top : 1px solid #C1C1C1;
}
.item_row > div,
.div_table_title > div {
min-width : 300px;
text-align : center;
}
.div_table_title > div {
font-weight : bold;
}
.item_row > div:first-child,
.div_table_title > div:first-child {
border-left : 1px solid #C1C1C1;
}
.item_row > div:last-child,
.div_table_title > div:last-child {
border-right : 1px solid #C1C1C1;
}
.div_button_wrap {
margin-top : 25px;
}
#export_button {
width : 72px;
height : 25px;
margin : 0 0 0 auto;
background : #404040;
text-align : center;
border : 1px solid #707070;
color : white;
border-radius : 14px;
cursor : pointer;
}
</style>
<body>
<div class="div_table">
<div class="div_table_title">
<div class="row_no">번호</div>
<div class="row_name">이름</div>
<div class="row_gender">성별</div>
<div class="row_phone">연락처</div>
</div>
<div class="div_table_list">
<div class="item_row">
<div class="row_no">1</div>
<div class="row_name">홍길동</div>
<div class="row_gender">남성</div>
<div class="row_phone">010-0000-0000</div>
</div>
<div class="item_row">
<div class="row_no">2</div>
<div class="row_name">홍길순</div>
<div class="row_gender">여성</div>
<div class="row_phone">010-1111-1111</div>
</div>
</div>
<div class="div_button_wrap">
<div id="export_button" onclick="downloadCSV()">export</div>
</div>
</div>
</body>
<script>
function downloadCSV() {
const fileName = "userList.csv";
const csv = convertNodeToCsvString();
var link = document.createElement("a");
var blob = new Blob(["\uFEFF"+csv], {type: 'text/csv; charset=utf-8'});
var url = URL.createObjectURL(blob);
$(link).attr({"download" : fileName , "href" : url});
link.click();
}
function convertNodeToCsvString() {
var result = "";
var node = $(".div_table_title").children();
$(node).each(function (index, value) {
result += $(value).text() + ",";
})
result += "\n";
var itemNodes. = $(".div_table_list").children();
$(itemNodes).each(function (index, value) {
result += $(value).find(".row_no").text() +",";
result += $(value).find(".row_name").text() +",";
result += $(value).find(".row_gender").text() +",";
result += $(value).find(".row_phone").text() +",\n";
})
return result;
}
</script>
</html>
728x90
반응형
LIST
'dev > web' 카테고리의 다른 글
| Google 3rd Party oAuth2 device 구현하기 (6) | 2022.07.21 |
|---|---|
| javascript 동적 Dialog Modal 만들기 (12) | 2022.06.21 |
| php 500 에러코드 출력 (6) | 2021.01.18 |
| Window 에서 Apache + PHP+ Mysql WebServer 만들기 3부 MySql 편 (14) | 2021.01.10 |
| Window 에서 Apache + PHP+ Mysql WebServer 만들기 2부 PHP 편 (4) | 2021.01.09 |