[javascript] JavaScript 배열 정보를 CSV로 내보내는 방법 (클라이언트 측)?

JAVASCRIPT / 글쓴이

나는이 성격에 대해 많은 질문이 있다는 것을 알고 있지만 JavaScript를 사용 하여이 작업을 수행해야합니다. Dojo 1.8배열에 모든 속성 정보를 사용 하고 있으며 다음과 같습니다.

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

CSV클라이언트 쪽에서 어떻게 내보낼 수 있습니까?

답변

기본 JavaScript에서이 작업을 수행 할 수 있습니다. 질문에 설명 된대로 데이터 배열을 사용한다고 가정하면 데이터를 올바른 CSV 형식으로 구문 분석해야합니다.

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

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

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

또는 짧은 방법 ( 화살표 기능 사용 ) :

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

let csvContent = "data:text/csv;charset=utf-8,"
    + rows.map(e => e.join(",")).join("\n");

그런 다음 JavaScript window.open및 encodeURI함수를 사용 하여 CSV 파일을 다음과 같이 다운로드 할 수 있습니다 .

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

편집하다:

파일에 특정 이름을 지정하려면 window.open메소드를 사용하여 데이터 URI에 액세스하는 것이 지원되지 않으므로 약간 다르게 수행해야합니다 . 이를 위해 숨겨진 <a>DOM 노드를 작성하고 download다음과 같이 속성을 설정할 수 있습니다 .

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); // This will download the data file named "my_data.csv".

답변

위의 답변을 기반으로 IE 11, Chrome 36 및 Firefox 29에서 테스트 한이 기능을 만들었습니다. 

function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

예를 들면 다음과 같습니다.
https://jsfiddle.net/jossef/m3rrLzk0/

답변

이 솔루션은 Internet Explorer 10 이상, Edge, 이전 및 새 버전의 Chrome, FireFox, Safari, ++에서 작동합니다.

허용 된 답변은 IE 및 Safari에서 작동하지 않습니다.

// Example data given in question text
var data = [
  ['name1', 'city1', 'some other info'],
  ['name2', 'city2', 'more info']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(';');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
  var a = document.createElement('a');
  mimeType = mimeType || 'application/octet-stream';

  if (navigator.msSaveBlob) { // IE10
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) { //html5 A[download]
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
  }
}

download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');

스 니펫 확장

코드 스 니펫을 실행하면 모의 데이터가 csv로 다운로드됩니다.

dandavis의 크레딧 https://stackoverflow.com/a/16377813/1350598

답변

나는 좀 더 RFC 4180 준수를 찾고 여기에 와서 구현을 찾지 못했습니다. 그래서 제 자신의 필요에 따라 비효율적입니다. 나는 그것을 모든 사람과 공유 할 것이라고 생각했다.

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

희망적으로 이것은 미래에 누군가를 도울 것입니다. CSV 인코딩과 파일 다운로드 기능이 결합되어 있습니다. jsfiddle 에 대한 나의 예제에서 . HTML 5 브라우저를 가정하여 파일을 다운로드하거나 콘솔에서 출력을 볼 수 있습니다.

최신 정보:

Chrome에서 이제 파일 이름을 지정할 수없는 것으로 보입니다. 어떤 일이 발생했는지 또는 어떻게 해결해야할지 모르겠지만이 코드 (jsfiddle 포함)를 사용할 때마다 다운로드 된 파일의 이름이으로 변경되었습니다 download.csv.

답변

@Default의 솔루션은 Chrome에서 완벽하게 작동하지만 (고마워요!) IE에 문제가있었습니다.

솔루션은 다음과 같습니다 (IE10에서 작동).

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")

답변

Chrome 35 업데이트에서 다운로드 속성 동작이 변경되었습니다.

https://code.google.com/p/chromium/issues/detail?id=373182

크롬에서 이것을 사용하려면 이것을 사용하십시오. 

var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();

답변

모든 언어에 대한 작업

        function convertToCsv(fName, rows) {
        var csv = '';
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            for (var j = 0; j < row.length; j++) {
                var val = row[j] === null ? '' : row[j].toString();
                val = val.replace(/\t/gi, " ");
                if (j > 0)
                    csv += '\t';
                csv += val;
            }
            csv += '\n';
        }

        // for UTF-16
        var cCode, bArr = [];
        bArr.push(255, 254);
        for (var i = 0; i < csv.length; ++i) {
            cCode = csv.charCodeAt(i);
            bArr.push(cCode & 0xff);
            bArr.push(cCode / 256 >>> 0);
        }

        var blob = new Blob([new Uint8Array(bArr)], { type: 'text/csv;charset=UTF-16LE;' });
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fName);
        } else {
            var link = document.createElement("a");
            if (link.download !== undefined) {
                var url = window.URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", fName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }
        }
    }



    convertToCsv('download.csv', [
        ['Order', 'Language'],
        ['1', 'English'],
        ['2', 'Español'],
        ['3', 'Français'],
        ['4', 'Português'],
        ['5', 'čeština'],
        ['6', 'Slovenščina'],
        ['7', 'Tiếng Việt'],
        ['8', 'Türkçe'],
        ['9', 'Norsk bokmål'],
        ['10', 'Ελληνικά'],
        ['11', 'беларускі'],
        ['12', 'русский'],
        ['13', 'Українська'],
        ['14', 'հայերեն'],
        ['15', 'עִברִית'],
        ['16', 'اردو'],
        ['17', 'नेपाली'],
        ['18', 'हिंदी'],
        ['19', 'ไทย'],
        ['20', 'ქართული'],
        ['21', '中国'],
        ['22', '한국어'],
        ['23', '日本語'],
    ])