JavaScript로 CSV 파일을 만들고 다운로드하는 방법은 무엇입니까?

JavaScript에는 다양한 데이터를 조작하고 다양한 형식의 파일을 처리할 수 있는 강력한 기능이 있습니다. 때때로 개발자는 JavaScript를 사용하여 웹 애플리케이션을 개발하는 동안 CSV 파일을 사용하여 데이터를 처리해야 합니다.

예를 들어 우리는 사용자가 제품을 사고 팔 수 있는 전자상거래 플랫폼을 구축하고 있습니다. 또한 사용자가 시간 범위에 따라 주문 세부정보를 CSV 파일로 다운로드할 수 있도록 하고 싶습니다. 이 경우 데이터 및 CSV 파일과 상호 작용해야 합니다. 또 다른 예는 온라인 뱅킹 웹사이트를 통해 거래 세부정보를 CSV 파일로 다운로드할 수 있다는 것입니다.

이 튜토리얼에서는 JavaScript 또는 JSON 객체 형식으로 주어진 데이터를 기반으로 csv 파일을 생성하고 파일을 다운로드하는 방법을 알아봅니다.

문법

사용자는 아래 구문에 따라 주어진 데이터에서 CSV 파일을 만들고 다운로드할 수 있습니다.

으아아아

위 구문에서 "csvData"는 CSV 파일 행에 데이터를 추가하는 배열입니다. 그런 다음 앵커 태그를 사용하여 csvData에서 CSV 파일을 생성하고 앵커 요소를 클릭하여 파일을 다운로드합니다.

예

아래 예에서는 먼저 "노트북"이라는 개체 배열을 만듭니다. 여기서 배열의 각 개체에는 브랜드, 프로세서, 가격 및 RAM 속성이 포함됩니다.

downloadFile() 함수에서는 쉼표로 구분된 개체 키를 “csvData” 변수에 추가합니다. 그런 다음 주어진 객체 배열을 반복하고 각 속성 값을 동일한 순서로 연결하여(쉼표로 구분하고 이를 "CSVData" 변수에 추가) 단일 행을 준비합니다.

다음으로 createElement() 메소드를 사용하여 앵커 요소를 생성하고 encodeURI() 메소드를 사용하여 인코딩한 후 href 속성 값으로 "csvData"를 추가합니다. 추가적으로 목표값을 설정하고 속성값을 다운로드합니다. 마지막으로 앵커 요소를 클릭하여 CSV 파일을 다운로드합니다.

출력에서 사용자는 버튼을 클릭하여 데이터를 CSV 파일로 다운로드할 수 있습니다.

으아아아

예

아래 예에서는 API에서 데이터를 가져와서 JSON 데이터를 사용하여 CSV 파일을 생성해 보겠습니다. HTML 섹션에 버튼을 생성했으며, 사용자가 버튼을 클릭하면 downloadFile() 함수를 실행하여 JSON 데이터를 가져와서 CSV 파일로 다운로드합니다.

프로그래머는 다음 단계에 따라 샘플 코드를 이해할 수 있습니다. -

1단계 - fetch() API를 사용하여 API URL에서 데이터를 가져옵니다.

2단계 - 그런 다음 res.json() 메서드를 사용하여 응답을 JSON 개체로 변환합니다.

3단계 - then() 블록에서 csvData[] 배열을 초기화하여 CSV 파일의 행을 저장합니다.

4단계 - 응답에서 첫 번째 개체를 가져와 Object.keys() 메서드에 인수로 전달하여 배열의 모든 키를 가져옵니다. 그런 다음, Join() 메서드를 사용하여 키를 쉼표로 구분된 단일 문자열로 연결하고 csvData 배열에 푸시합니다.

5단계 - 응답에서 얻은 모든 개체를 반복합니다. 루프에서는 'heads' 배열과 함께 map() 메서드를 사용하여 'heads' 배열 요소(객체 키)를 기반으로 현재 객체에서 값을 가져오고 해당 값을 'rowValues' 배열에 매핑합니다.

6단계 - 다음으로, Join() 메서드를 사용하여 "rowValues" 배열의 모든 요소를 ​​결합하고 "csvData" 배열에 푸시합니다.

7단계 - "

" 구분 기호를 사용하여 "csvData" 배열의 모든 요소를 ​​연결하고 이를 getCSVFile() 함수 매개 변수로 전달합니다.

8단계 - getCSVFile() 함수에서 앵커 요소의 새 인스턴스를 만듭니다. 그 후 인코딩된 csvData를 'href' 속성 값으로 설정하고 'target' 및 'download' 속성 값을 설정합니다.

9단계 - 앵커 요소를 클릭하여 파일을 다운로드합니다.

으아아아

두 샘플 코드 모두 두 가지 주요 부분을 포함합니다. 첫 번째 부분은 주어진 데이터를 조작하고 이를 CSV 파일 데이터에 사용할 쉼표로 구분된 문자열로 연결하는 것입니다. 다음 부분은 파일에 데이터를 추가하고 파일을 다운로드하는 것입니다. CSV 파일을 생성하기 위해 앵커 요소의 더미 인스턴스를 사용합니다.

위 내용은 JavaScript로 CSV 파일을 만들고 다운로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!