반응형
- code -
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="utf-8">
<title>HTML CSV DOWNLOAD</title>
</head>
<body>
<table id="mytable" border="1">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>csv다운은...1</td>
<td>이러쿵저러쿵.....</td>
</tr>
<tr>
<td>2</td>
<td>csv다운은...2</td>
<td>이렇게저렇게.....</td>
</tr>
</tbody>
</table>
<br>
<button id="csvDownloadButton">CSV 다운로드 받기</button>
</body>
<script type="text/javascript">
class ToCSV {
constructor() {
// CSV 버튼에 이벤트 등록
document.querySelector('#csvDownloadButton').addEventListener('click', e => {
e.preventDefault()
this.getCSV('mycsv.csv')
})
}
downloadCSV(csv, filename) {
let csvFile;
let downloadLink;
// CSV 파일을 위한 Blob 만들기
csvFile = new Blob([csv], {type: "text/csv"})
// Download link를 위한 a 엘리먼스 생성
downloadLink = document.createElement("a")
// 다운받을 csv 파일 이름 지정하기
downloadLink.download = filename;
// 위에서 만든 blob과 링크를 연결
downloadLink.href = window.URL.createObjectURL(csvFile)
// 링크가 눈에 보일 필요는 없으니 숨겨줍시다.
downloadLink.style.display = "none"
// HTML 가장 아래 부분에 링크를 붙여줍시다.
document.body.appendChild(downloadLink)
// 클릭 이벤트를 발생시켜 실제로 브라우저가 '다운로드'하도록 만들어줍시다.
downloadLink.click()
}
getCSV(filename) {
// csv를 담기 위한 빈 Array를 만듭시다.
const csv = []
const rows = document.querySelectorAll("#mytable tr")
for (let i = 0; i < rows.length; i++) {
const row = [], cols = rows[i].querySelectorAll("td, th")
for (let j = 0; j < cols.length; j++)
row.push(cols[j].innerText)
csv.push(row.join(","))
}
// Download CSV
this.downloadCSV(csv.join("\n"), filename)
}
}
document.addEventListener('DOMContentLoaded', e => {
new ToCSV()
})
</script>
</html>결과물
| 번호 | 제목 | 내용 |
|---|---|---|
| 1 | csv다운은...1 | 이러쿵저러쿵..... |
| 2 | csv다운은...2 | 이렇게저렇게..... |
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 슬라이드(slide) 위로 올라가는 방향 (0) | 2020.11.09 |
|---|---|
| [HTML & CSS] 멋진 리스트 스타일(list style ) (0) | 2020.11.03 |
| [HTML & CSS] 다양한 모양의 체크박스(checkbox) 만들기 !! (코드&예시 첨부) (0) | 2020.10.27 |
| [HTML & CSS] 경고창(alert) 확인 / 취소 띄우기! (0) | 2020.10.26 |
| [HTML & CSS] 레이아웃(layout) 기본틀 (0) | 2020.10.23 |
댓글