아무래도 그리드를 이용한 웹프로그램을 만들면 화면에 보이는 자료를 다운로드해서 활용하는 것이 너무도 당연한 진행이겠죠. 이럴때 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 |
