JavaScript에서 CSV로 배열 내보내기

Shivam Arora 2023년10월12일
JavaScript에서 CSV로 배열 내보내기

이 튜토리얼은 클라이언트 측에서 JavaScript 배열 정보를 CSV 파일로 내보내는 방법을 보여줍니다.

배열 정보를 CSV 파일로 변환하려면 JavaScript 데이터를 CSV 형식으로 올바르게 구문 분석해야합니다. 인코딩 및 CSV 데이터 형식을 처리 할 수있는 개체로 저장해야합니다.

이 예에서는 배열 배열을 사용하여 데이터를 저장합니다.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

let csvContent = 'data:text/csv;charset=utf-8,';

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

data배열의 콘텐츠를csvContent개체에 저장합니다. 각 배열의 행을 만들어 별도의 개체에 저장합니다.

또는 화살표 함수를 사용하여 동일한 결과를 얻는 더 짧은 방법으로 다음 코드를 사용할 수 있습니다.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

map()함수는 배열의 각 요소에 대해 함수를 호출하고 새 배열을 만듭니다. join()메소드는 구분 기호를 사용하여 기존 배열의 구성 요소를 문자열에 결합합니다. 이 경우 쉼표를 구분 기호로 사용합니다.

위에서 만든 CSV 개체를 다운로드하고 인코딩하기 위해 다음 코드를 사용합니다.

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

이제이csvContent개체를 외부 파일로 내 보냅니다. EncodeURI는 URI를 인코딩하는 데 사용됩니다. 이 함수는(, / ? : @ & = + $)를 제외한 특수 문자를 인코딩하고 인코딩 된 URI를 나타내는 문자열 값을 반환합니다.

CSV 파일에 특정 이름을 지정하려면 숨겨진 DOM 노드를 만들고 다운로드 기능을 설정해야합니다.

이것은 아래에서 수행됩니다.

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

setAttribute()메소드는 주어진 요소에 특정 속성 값을 추가합니다. 위 코드에서link.click()link.setAttribute()함수에 제공된 파일 이름을 직접 다운로드하기 위해 다운로드하는 데 사용됩니다.

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

아래 코드를 참조하십시오.

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

출력:

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"

관련 문장 - JavaScript CSV