[JavaScript] csv 파일로 저장하기

자바스크립트를 이용하여 csv 파일을 생성하면 좋을 때가 있다.

api등을 이용하여 json 형태로 데이터를 가져온 다음 화면상에 표로 나타내는 경우가 많다.

이런 표를 엑셀 등의 프로그램을 이용하여 열고 싶을 때가 있다.

csv 파일로 만들어서 저장하면 엑셀 뿐만 아니라 메모장으로도 열어볼 수 있다.

csv 파일로 저장할 때 열은 콤마(,)로 구분하고 행은 '\r\n'을 이용하여 구분한다.

간단한 배열을 이용하여 csv 파일을 생성하는 예제를 만들어보고자 한다.

어떠한 자료를 가져오든 csv 파일에 맞게 가공을 잘 하는 것이 중요해 보인다.

참고로 인터넷 익스프로러에서 테스트해봤는데 거기서는 안되는 것으로 보인다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
	function downloadCSV(){
		var array = [];
		array.push({name:"name1", age: 20, test: "test1"});
		array.push({name:"name2", age: 22, test: "test2"});
		array.push({name:"name3", age: 24, test: "test3"});

		var a = "";
		$.each(array, function(i, item){
			a += item.name + "," + item.age + "," + item.test + "\r\n";
		});

		// jquery 사용하지 않는 경우
		/* for(var i=0; i<array.length; i++){
			a += array[i].name + "," + array[i].age + "," + array[i].test + "\r\n";
		} */

		var downloadLink = document.createElement("a");
		var blob = new Blob([a], { type: "text/csv;charset=utf-8" });
		var url = URL.createObjectURL(blob);
		downloadLink.href = url;
		downloadLink.download = "data.csv";

		document.body.appendChild(downloadLink);
		downloadLink.click();
		document.body.removeChild(downloadLink);
	}
</script>

<button onclick="downloadCSV();">download</button>