675

この性質の質問がたくさんあることは知っていますが、JavaScript を使用してこれを行う必要があります。私は使用Dojo 1.8していて、すべての属性情報を配列に持っています。これは次のようになります。

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

CSVこれをクライアント側にエクスポートする方法はありますか?

4

29 に答える 29

1130

これはネイティブ 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");

次に、JavaScriptwindow.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".
于 2013-02-19T19:51:13.533 に答える
87

このソリューションは、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 としてダウンロードされます

ダンダビスへのクレジットhttps://stackoverflow.com/a/16377813/1350598

于 2015-03-27T15:29:45.267 に答える
35

@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")
于 2013-11-08T10:47:25.030 に答える
6

ここで 2 つの質問があります。

  1. 配列をcsv文字列に変換する方法
  2. その文字列をファイルに保存する方法

ここでの最初の質問に対するすべての回答 (Milimetric によるものを除く) は、やり過ぎのように思えます。また、ミリメトリックによるものは、文字列を引用符で囲んだり、オブジェクトの配列を変換したりするなど、代替要件をカバーしていません。

これに対する私の見解は次のとおりです。

単純な csv の場合は、1 つの map() と join() で十分です。

    var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
    var csv = test_array.map(function(d){
        return d.join();
    }).join('\n');

    /* Results in 
    name1,2,3
    name2,4,5
    name3,6,7
    name4,8,9
    name5,10,11

この方法では、内部結合でカンマ以外の列区切りを指定することもできます。たとえば、タブ:d.join('\t')

一方、適切に実行して文字列を引用符 "" で囲みたい場合は、JSON マジックを使用できます。

var csv = test_array.map(function(d){
       return JSON.stringify(d);
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ]
                                   // brackets from each line 

/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

次のようなオブジェクトの配列がある場合:

var data = [
  {"title": "Book title 1", "author": "Name1 Surname1"},
  {"title": "Book title 2", "author": "Name2 Surname2"},
  {"title": "Book title 3", "author": "Name3 Surname3"},
  {"title": "Book title 4", "author": "Name4 Surname4"}
];

// use
var csv = data.map(function(d){
        return JSON.stringify(Object.values(d));
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, '');
于 2016-04-08T16:16:15.720 に答える
6

ES6 での 1 つの矢印関数:

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"/*, ...*/]]
  )
);

にこれを必要とする場合react-csv、そのためにありますか

于 2016-11-25T10:15:06.340 に答える
5

csv データで blob を作成します。var blob = new Blob([data], type:"text/csv");

ブラウザーが blob の保存をサポートしている場合、if window.navigator.mSaveOrOpenBlob)===true次を使用して csv データを保存します。 window.navigator.msSaveBlob(blob, 'filename.csv')

ブラウザーが blob の保存とオープンをサポートしていない場合は、csv データを次のように保存します。

var downloadLink = document.createElement('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);

完全なコード スニペット:

var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
     type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveBlob(blob, filename);
} else {
    var downloadLink = document.element('<a></a>');
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', filename);
    downloadLink.attr('target', '_blank');  
    document.body.append(downloadLink); 
    downloadLink[0].click(); 
}
于 2015-04-21T09:09:07.260 に答える
1

string[][]この関数を使用して、を csv ファイル に変換します。"、a、,またはその他の空白 (空白を除く)が含まれている場合、セルを引用します。

/**
 * 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:がポリフィルされていない限り、11 未満の Internet Explorer では動作しません。

注: セルに数字が含まれている場合は、cell=''+cell前に追加if (cell.replace...して数字を文字列に変換できます。

または、ES6 を使用して 1 行で記述できます。

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
于 2017-11-17T00:01:52.593 に答える
0

Xavier Johns 関数に追加して、必要に応じてフィールド ヘッダーも含めますが、jQuery を使用します。$.each ビットは、ネイティブ JavaScript ループ用に変更する必要があります

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);
        }
    }
}
于 2016-09-20T12:25:07.240 に答える
0

これは、受け入れられた回答に基づいて修正された回答であり、データは JSON から取得されます。

            JSON Data Ouptut:
             0 :{emails: "SAMPLE Co., peter@samplecompany.com"}, 1:{emails: "Another CO. , ronald@another.com"}


            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();
        });
于 2016-09-21T13:18:02.137 に答える