JavaScript로 CSV 파일(스프레드시트) 내보내기

JavaScript를 사용하여 CSV(쉼표로 구분된 값) 파일을 내보내야 하는 프로젝트를 진행하고 있었습니다. 나는 게으름을 느꼈고 나를 위해 대부분의 작업을 수행할 멋진 노드 패키지를 찾을 수 있다고 생각했습니다. 내가 찾은 모든 노드 패키지는 많은 옵션이 포함된 매우 강력해 보였지만 파악하기 어려울 것 같았습니다.

Node 패키지를 사용하거나 매우 강력한 Ruby의 gem을 사용할 때의 문제는 그들이 원하는 것을 정확히 수행하지 않는 경우 이를 작동시키는 방법을 알아내려고 몇 일 또는 몇 시간을 보낼 수 있다는 것입니다. 그 결과 코드를 직접 작성하는 것이 더 쉬울 것이라고 생각했습니다.

내 웹 앱에 다음과 같은 데이터가 있었습니다.



(아니요, 이것들은 제 비트코인 ​​주소가 아닙니다 – lol, 이것은 가장 부유한 비트코인 ​​주소 목록에서 가져온 것입니다)

그리고 스프레드시트로 열었을 때 다음과 같은 내용을 표시하기를 원했습니다.



(내 앱 CryptoChecker의 스크린샷 – https://www.1337ipjbp7u9mi9cdlngl3g5napum7twzm.com )

제 경우에는 CSV 파일로 내보내고 싶은 데이터가 Array of Objects에 있었습니다. 앱이 자바스크립트이기 때문에 사용자가 앱을 닫으면 모든 데이터가 손실됩니다. 공용 주소는 상당히 길고 앱에 입력하기 어려울 수 있으므로 사용자는 이 정보를 저장하고 싶을 수 있습니다.

나는 React, Jquery에서 유사한 코드를 작성했고 Ruby에서 일부 CSV 작업을 수행했습니다. 그래서 숫돌에 코를 대고 파헤쳐 코드를 작성했습니다. 파일 관리 도구가 핵심 문제가 될 것이라는 것을 금방 깨달았습니다. Ruby에는 훌륭한 파일 관리 도구가 몇 가지 있지만 Java Script에서는 그렇지 않습니다.

그럼에도 불구하고 출력 파일을 CSV로 저장하고 사용자가 파일 이름을 쉽게 지정할 수 있는 멋진 노드 모듈인 FileSaver.js(FileSaver npm 페이지를 보려면 여기를 클릭)를 찾았습니다. FileSaver 노드 모듈을 설치하고 가져온 후 코드의 핵심 행은 다음과 같습니다.

var blob = new Blob([csv], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "yourcsv.csv");

Blob은 단지 데이터 청크이며 이름은 SQL 데이터베이스에서 유래했으며 "Binary Large Object"를 의미합니다. 보시다시피 파일(yourcsv.csv)의 이름을 지정하고 파일 형식을 결정할 수 있습니다. 이 작업을 수행한 후에는 개체 배열을 올바른 형식으로 가져오기만 하면 됩니다.

독자가 이 게시물을 더 명확하게 이해할 수 있도록 실제 코드를 다시 작성했습니다. 간단한 개체 배열부터 시작합니다.

const arrayOfObjects = [{column1: "1", column2: "2", column3: "3"},{column1: 4, column2: 5, column3: 6}]

여기에서 arrayOfObjects를 csv로 변환하는 코드는 매우 간단합니다.

arrayOfObjects.map((row) => {
csv += `\r\n ${row.column1}, ${row.column2}, ${row.column3}`
})

\r\n은 캐리지 리턴 + 라인 피드입니다. 새 행이 시작됩니다. csv를 콘솔에 기록하면 얻을 수 있습니다(키를 헤더로 추가하는 경우).

column1, column2, column3, 
1, 2, 3
4, 5, 6

`
이것이 바로 내가 원했던 것입니다.

FileSaver.js는 완벽하게 작동했고 yourcsv.csv 파일을 다운로드했습니다.

다음은 코드의 github 요지( https://gist.github.com/1337ipJbP7U9mi9cdLngL3g5Napum7tWzM/fd9b8aafbba79dc76971e892c2c82ec0 )입니다.

쉽게 사용할 수 있는 형식으로 코드를 제공하기 위해 이 예제 코드를 웹 페이지 내부의 일부 스크립트 태그에 넣은 다음 Chrome 브라우저에서 로컬로 실행하는 좋은 아이디어가 있었습니다(참고 ctr O는 로컬 파일 열기). 안타깝게도 이로 인해 FileSaver.js Node 모듈을 사용하기가 어려웠습니다. 스크립트 태그 내에서 "가져오기"를 사용할 수 없습니다.

결과적으로 FileSaver.js( https://github.com/eligrey/FileSaver.js )의 github 페이지로 이동하여 "dist"폴더의 "FileSaver.js"파일을 복사하여 내 코드와 동일한 디렉토리의 새 파일에 붙여넣어야 했습니다. . FileSaver.js는 아래와 같이 6행에서 "script src="태그를 사용하여 가져옵니다.
<script src="./filesaver.js"></script>
코드를 사용하려는 경우에도 이 작업을 수행해야 합니다.

CSV 파일을 내보내는 더 좋은 방법이 있을 수 있지만 인디 해커에게는 충분합니다. 더 좋은 방법을 알고 계시다면 댓글로 알려주세요.