티스토리 뷰

IT tech Coding/javascript

[자바스크립트] 간단히 CSV파일 다운로드 만들어 보기

Coding Life 2021. 11. 28. 19:53
반응형

아무래도 그리드를 이용한 웹프로그램을 만들면 화면에 보이는 자료를 다운로드해서 활용하는 것이 너무도 당연한 진행이겠죠. 이럴때 CSV파일로 저장해서 활용하면 더 효율적이라 할 수 있겠죠.

 

간단하게 CSV파일로 저장하는 자바스크립트, 바로 실행하기 좀 그래서 php파일로 저장했지만, <script>테그를 써서 자바스크립트로 실제 실행해 봤습니다.

실제는 <script> 테그 안의 내용이 실행내용이고, 나머지는 웹에서 한번 뿌려보려고 상단에 코딩 붙인 것입니다.

 

위와 같이 윈도우 화면 좌측 하단에 파일이 생깁니다. 오~~~

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<body>
<script>
const data = [
    ["홍길동", "김영희", "이철수"],
    ["삼식이", "홍두식", "박덕자"]
];

let csvContent = "data:text/csv;charset=utf-8,\uFEFF";   // 한글파일은 뒤에,\uFEFF  추가해서 해결함.

data.forEach(function(rowArray) {
    let row = rowArray.join(",");
    csvContent += row + "\r\n";
});

중요사항, 한글파일은 '\uFEFF'   반드시 넣어야 나옵니다. 안그러면... 아래와 같이 나와요.

 

당황하셨죠? 


// 위와 같은 코드인데 간결하게 작성함.
// const data = [
    // ["홍길동", "김영희", "이철수"],
    // ["삼식이", "홍두식", "박덕자"]
// ];
// let csvContent = "data:text/csv;charset=utf-8," + data.map(e => e.join(",")).join("\n");  // 간결한 표현식

// 위의 코드를 다운로드 하고 인코딩을 위한 코드는 아래와 같습니다.

// var encodedUri = encodeURI(csvContent);
// window.open(encodedUri);

// 이 함수는(, /? : @ & = + $)를 제외한 특수 문자를 인코딩하고 인코딩 된 URI를 나타내는 문자열 값을 반환합니다.
// CSV 파일에 특정 이름을 지정하려면 숨겨진 DOM 노드를 만들고 다운로드 기능을 설정해야합니다. 이것은 아래에서 수행됩니다.

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "csv_downloadfile.csv");
document.body.appendChild(link); 
link.click();

// 데이터를 큰 따옴표 안에 삽입하려면 CSV 데이터 개체를 만드는 동안JSON.stringify()함수를 사용할 수 있습니다.
// 아래 코드를 참조하십시오.

// const data = [
    // ["홍길동", "김영희", "이철수"],
    // ["삼식이", "홍두식", "박덕자"]
// ];
// var csv = data.map(function(d){
       // return JSON.stringify(d);
    // })
    // .join('\n') 
    // .replace(/(^\[)|(\]$)/mg, '');
// console.log(csv);


</script>
</body>
</html>

빨간색 글씨만 있어도 실행될거예요. 나머지는 공부하면서 주석달아서 작성했습니다.

출력결과는 엑셀에서 열어보면 아래와 같이 잘 나와있어요.

자바스크립트 csv파일 저장시 한글로 위와 같이 나오려면, 반드시 추가해야할 사항... 꼭 기억하세요.

이거 몰라서 몇시간을 찾아 해멨는지 모릅니다. 꼭 기억하세요.

반응형
저작자표시 비영리 변경금지

'IT tech Coding > javascript' 카테고리의 다른 글

[js] php화면에 자바스크립트 활용해서 스케줄표 그려주기, 실무에서 사용한 코드  (0) 2021.12.18
jexcel에서 toast UI grid로 웹사이트 변경작업하기  (0) 2021.12.12
자바스크립트로 줌인 줌아웃 만들어 보자, ZOOM IN ZOOM OUT 어렵지 않아요~~  (0) 2020.04.13
php 작성된 배열을 자바스크립트에서 불러오는 방법  (0) 2020.02.20
javascript html 폼의 submit 전송을 자바스크립트로 구현하는 방법  (0) 2019.07.28
댓글