javascript - 넣기 - 자바스크립트 배열 선언




JavaScript 배열 정보를 csv(클라이언트 측)로 내보내는 방법은 무엇입니까? (15)

ES6의 화살표 기능 하나 :

const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) =>  row.join(',')).join(`\n`)}`
);

다음 :

window.open(
  dataToCsvURI(
   [["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
  )
);

누군가가 reactjs 필요로하는 경우에, react-csv 가 거기에 있습니다.

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

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

클라이언트 측에서 이것을 어떻게 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")

PapaParse와 같은 라이브러리를 사용하는 것이 좋습니다. https://github.com/mholt/PapaParse

수락 된 답변에는 현재 다음과 같은 여러 가지 문제가 있습니다.

  • 데이터에 쉼표가 있으면 실패합니다.
  • 데이터에 줄 바꿈이 있으면 실패합니다.
  • 데이터에 따옴표가 들어 있으면 (종류) 실패합니다.

Xavier Johns 함수를 추가하여 필요한 경우 필드 머리글을 포함하고 jQuery를 사용합니다. $. 각 비트는 기본 자바 스크립트 루프를 변경해야합니다.

function exportToCsv(filename, rows, headers = false) {
    var processRow = function (row) {
        row = $.map(row, function(value, index) {
            return [value];
        });
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            if(i == 0 && j == 0 && headers == true){
                var ii = 0;
                $.each(rows[i], function( index, value ) {
                    //console.log(index);
                    var fieldName = index === null ? '' : index.toString();
                    //console.log(fieldName);
                    var fieldResult = fieldName.replace(/"/g, '""');
                    //console.log(fieldResult);
                    if (fieldResult.search(/("|,|\n)/g) >= 0){
                        fieldResult = '"' + fieldResult + '"';
                    }
                    //console.log(fieldResult);
                    if (ii > 0){
                        finalVal += ',';
                        finalVal += fieldResult;
                    }else{
                        finalVal += fieldResult;
                    }
                    ii++;
                    //console.log(finalVal);
                });
                finalVal += '\n';
                //console.log('end: '+finalVal);
            }
            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;
            }else{
                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);
        }
    }
}

기본 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";
}); 

그런 다음 JavaScript의 window.openencodeURI 함수를 사용하여 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".

너 거기 간다.

<!doctype html>  
<html>  
<head></head>  
<body>
<a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>

<script type="text/javascript">  
    var stockData = [
        {
            Symbol: "AAPL",
            Company: "Apple Inc.",
            Price: "132.54"
        },
        {
            Symbol: "INTC",
            Company: "Intel Corporation",
            Price: "33.45"
        },
        {
            Symbol: "GOOG",
            Company: "Google Inc",
            Price: "554.52"
        },
    ];

    function convertArrayOfObjectsToCSV(args) {
        var result, ctr, keys, columnDelimiter, lineDelimiter, data;

        data = args.data || null;
        if (data == null || !data.length) {
            return null;
        }

        columnDelimiter = args.columnDelimiter || ',';
        lineDelimiter = args.lineDelimiter || '\n';

        keys = Object.keys(data[0]);

        result = '';
        result += keys.join(columnDelimiter);
        result += lineDelimiter;

        data.forEach(function(item) {
            ctr = 0;
            keys.forEach(function(key) {
                if (ctr > 0) result += columnDelimiter;

                result += item[key];
                ctr++;
            });
            result += lineDelimiter;
        });

        return result;
    }

    window.downloadCSV = function(args) {
        var data, filename, link;

        var csv = convertArrayOfObjectsToCSV({
            data: stockData
        });
        if (csv == null) return;

        filename = args.filename || 'export.csv';

        if (!csv.match(/^data:text\/csv/i)) {
            csv = 'data:text/csv;charset=utf-8,' + csv;
        }
        data = encodeURI(csv);

        link = document.createElement('a');
        link.setAttribute('href', data);
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
       }
</script>  
</body>  
</html>  

다음은 Angular friendly 버전입니다.

  constructor(private location: Location, private renderer: Renderer2) {}

  download(content, fileName, mimeType) {

    const a = this.renderer.createElement('a');

    mimeType = mimeType || 'application/octet-stream';

    if (navigator.msSaveBlob) {

      navigator.msSaveBlob(new Blob([content], {
        type: mimeType
      }), fileName);
    }
    else if (URL && 'download' in a) {

      const id = GetUniqueID();

      this.renderer.setAttribute(a, 'id', id);
      this.renderer.setAttribute(a, 'href', URL.createObjectURL(new Blob([content], {
        type: mimeType
      })));

      this.renderer.setAttribute(a, 'download', fileName);

      this.renderer.appendChild(document.body, a);

      const anchor = this.renderer.selectRootElement(`#${id}`);

      anchor.click();

      this.renderer.removeChild(document.body, a);
    }
    else {
      this.location.go(`data:application/octet-stream,${encodeURIComponent(content)}`);
    }
  };

다음은 Java GWT 애플리케이션의 클라이언트 측에서 CSV 파일을 다운로드하는 방법입니다. 그의 솔루션에 대한 Xavier John에게 특별히 감사드립니다. FF 24.6.0, IE 11.0.20 및 Chrome 45.0.2454.99 (64 비트)에서 작동하는 것으로 확인되었습니다. 나는 이것이 누군가에게 약간의 시간을 절약하기를 희망한다.

public class ExportFile 
{

    private static final String CRLF = "\r\n";

    public static void exportAsCsv(String filename, List<List<String>> data) 
    {
        StringBuilder sb = new StringBuilder();
        for(List<String> row : data) 
        {
            for(int i=0; i<row.size(); i++)
            {
                if(i>0) sb.append(",");
                sb.append(row.get(i));
            }
            sb.append(CRLF);
        }

        generateCsv(filename, sb.toString());
    }

    private static native void generateCsv(String filename, String text)
    /*-{
        var blob = new Blob([text], { 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);
            }
        }
    }-*/;
}

아래 코드를 사용하여 Javascript를 사용하여 CSV 파일로 배열을 내보낼 수 있습니다.

이것은 특수 문자 부분도 처리합니다.

var arrayContent = [["Séjour 1, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
var csvContent = arrayContent.join("\n");
var link = window.document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));
link.setAttribute("download", "upload_data.csv");
link.click(); 

Here 은 jsfiddle 작업 링크입니다.


여기에 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 됩니다.


위의 답변을 바탕으로 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/


위의 대답은 작동하지만, .xls 형식으로 열면 ~~은 ~, ~은 ',' 대신 '\t' 로 구분 될 수 있습니다. 응답은 https://.com/a/14966131/6169225 는 .join(',') 대신 배열에서 .join('\t') 을 사용하는 한 잘 작동했습니다.


이 함수를 사용하여 string[][] 을 csv 파일로 변환합니다. " , 또는 다른 공백 (공백 제외)이 들어있는 경우 셀을 인용합니다.

/**
 * Takes an array of arrays and returns a `,` sparated csv file.
 * @param {string[][]} table
 * @returns {string}
 */
function toCSV(table) {
    return table
        .map(function(row) {
            return row
                .map(function(cell) {
                    // We remove blanks and check if the column contains
                    // other whitespace,`,` or `"`.
                    // In that case, we need to quote the column.
                    if (cell.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + cell.replace(/"/g, '""') + '"';
                    }
                    return cell;
                })
                .join(',');
        })
        .join('\n'); // or '\r\n' for windows

}

참고 : map 이 폴리 폴리되지 않으면 Internet Explorer <11에서 작동하지 않습니다.

참고 : 셀에 숫자가 들어있는 if (cell.replace... 숫자를 문자열로 변환하려면 if (cell.replace... 앞에 cell=''+cell 추가 할 수 있습니다.

또는 ES6을 사용하여 한 줄로 작성할 수 있습니다.

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')

이것은 데이터가 JSON에서 오는 것으로 대답 한 대답을 기반으로 수정 된 답변입니다.

            JSON Data Ouptut:
             0 :{emails: "SAMPLE Co., [email protected]"}, 1:{emails: "Another CO. , [email protected]"}


            JS:
            $.getJSON('yourlink_goes_here', { if_you_have_parameters}, function(data) {
            var csvContent = "data:text/csv;charset=utf-8,";
            var dataString = '';
             $.each(data, function(k, v) {
                dataString += v.emails + "\n";
             });

            csvContent += dataString;

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

            link.click();
        });

//It work in Chrome and IE ... I reviewed and readed a lot of answer. then i used it and tested in both ... 

var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    var blob = new Blob([CSV], { type: 'text/csv;charset=utf-8;' });
    var url = URL.createObjectURL(blob);            
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style = "visibility:hidden";
}

if (navigator.msSaveBlob) { // IE 10+
   link.addEventListener("click", function (event) {
     var blob = new Blob([CSV], {
       "type": "text/csv;charset=utf-8;"
     });
   navigator.msSaveBlob(blob, fileName);
  }, false);
}

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

//Regards




client-side