JavaScript dizi bilgileri csv'ye (istemci tarafında) nasıl dışa aktarılır?


511

Bu tür birçok soru olduğunu biliyorum ama bunu JavaScript kullanarak yapmam gerekiyor. Kullanıyorum Dojo 1.8ve böyle görünüyor dizideki tüm öznitelik bilgileri var:

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

Bunu CSVmüşteri tarafında nasıl aktarabileceğime dair bir fikrin var mı?

Yanıtlar:


837

Bunu yerel JavaScript'te yapabilirsiniz. Verilerinizi doğru CSV biçiminde ayrıştırmanız gerekir (soruda açıkladığınız gibi verileriniz için bir dizi dizi kullandığınız varsayılarak):

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

veya daha kısa yol ( ok işlevlerini kullanarak ):

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");

Daha sonra CSV dosyasını indirmek için JavaScript window.openve encodeURIişlevleri kullanabilirsiniz:

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

Düzenle:

Dosyanıza belirli bir ad vermek istiyorsanız, window.openyöntemi kullanarak bir veri URI'sine erişilmesi desteklenmediği için işleri biraz farklı yapmanız gerekir . Bunu başarmak için gizli bir <a>DOM düğümü oluşturabilir ve downloadözniteliğini aşağıdaki gibi ayarlayabilirsiniz :

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".

4
Bildiğim kadarıyla bunu kullanarak yapmanın bir yolu yok window.open. Ancak, istediğiniz downloaddosya adına ayarlanmış bir özniteliğe sahip gizli bir bağlantı oluşturabilirsiniz . Sonra bu bağlantıyı "tıklatmak" istediğiniz dosyayı indirir, cevabıma ekleyeceğim.
Varsayılan

14
document.body.appendChild(link);FF'de tam destek almak için eklemem gerekiyordu.
Hardbyte

9
Bu cevap yanlış: dava için başarısız olacak data = [["Hello, world"]]. Bu, bir sütun çıkması gerektiğinde iki sütun çıkarır.
aredridel

18
Bu, ~ 7000 satır gibi iyi çalışır. Ancak şu hatayı vermeye başlar: NETWORK_INVALID_REQUEST . Bu sorunla karşı karşıya olan başka kimse var mı? encodeURIComponent()İşlev veya başka bir şeyle ilgili üst veri sınırı var mı ? Tarayıcı olarak Chrome kullanıyorum.
Abhidemon

13
@Abhidemon Cevap büyük bir şey için bir damla türü kullanmak zorunda, o zaman iyi çalışır, örneğin: blob = new Blob ([csvContent], {type: "text / csv"}); href = window.URL.createObjectURL (damla); Daha fazla detay: stackoverflow.com/a/19328891/1854079
mdubez

256

Yukarıdaki cevaplara dayanarak IE 11, Chrome 36 ve Firefox 29'da test ettiğim bu işlevi oluşturdum

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);
        }
    }
}

Örneğin: https://jsfiddle.net/jossef/m3rrLzk0/


6
İçin geri düşebilir window.openbir in elsearasında link.download !== undefined.
MrYellow

2
Bu güzel bir kod parçası. Bunu CC-BY-SA'nın SO varsayılanından daha liberal bir şey altında lisanslamak için herhangi bir şansınız var mı? Örneğin, CC0, MIT, BSD, Apache, X11. . . meta.stackexchange.com/questions/12527/…
joseph_morris

1
Excel dışa aktarma işlemini bazı web uygulamalarında uygulamak için bu yöntemi kullanıyorum. Ancak Chrome 43+ artık DOM özelliklerini prototip zincirine taşıdı. Adresinde bir istisna atılır link.style.visibility='hidden'. B / c DOM özniteliği salt okunurdur. Daha fazla ayrıntı, updates.html5rocks.com/2015/04/… "Katı modda salt okunur özelliklere yazma" bölümünün altında bir hata verecektir "
Blaise

1
Bu yanıt şimdiye kadarki en iyi yanıttır. Özel karakterleri ve parantezleri olan vakaları içerir.
Vladimir Kostov

2
Bu cevabın indirme bölümünü kullandım ve Chrome'da iyi çalıştı, teşekkürler!
Liran H

77

Bu çözüm Internet Explorer 10+, Edge, eski ve yeni Chrome, FireFox, Safari, ++ sürümleriyle çalışmalıdır

Kabul edilen cevap IE ve Safari ile çalışmaz.

// 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');

Kod snippet'ini çalıştırmak, sahte verileri csv olarak indirir

Dandavis'e krediler https://stackoverflow.com/a/16377813/1350598


1
(En azından HTML5 kodu) setTimeout.
StubbornShowaGuy

@StubbornShowaGuy cool setTimeout'u örnek koddan kaldıracağım :)
Arne H. Bitubekk

En son Chrome, IE ve Firefox'ta çalışır. Teşekkürler!
walla

Buradaki tek çapraz tarayıcı çözümü. Safari 10.10 ve mobil Safari'de çalıştığını unutmayın. Ancak, iframebölüm sadece location.href = ... ile değiştirilebilir
Dan

2
NOT: gerçekte olduğundan, fonksiyonunda bir yazım hatası vardır URL.createObjectURL(uçları ile URLdeğil Url).
Nathan Hinchey

35

Buraya biraz daha RFC 4180 uyumluluğu aramaya geldim ve bir uygulama bulamadım, bu yüzden kendi ihtiyaçlarım için (muhtemelen verimsiz) bir tane yaptım. Herkesle paylaşacağımı düşündüm.

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');

Umarım bu gelecekte birine yardım eder. Bu, hem CSV kodlamasını hem de dosyayı indirme yeteneğini birleştirir. Benim jsfiddle örneğimde . Dosyayı indirebilir (HTML 5 tarayıcısı varsayarak) veya çıktıyı konsolda görüntüleyebilirsiniz.

GÜNCELLEME:

Chrome artık dosyayı adlandırma yeteneğini kaybetmiş görünüyor. Ne olduğundan veya nasıl düzeltileceğinden emin değilim, ancak bu kodu (jsfiddle dahil) her kullandığımda, indirilen dosya şimdi adlandırıldı download.csv.


İyi yakala Chris, sayısal verilerle test etmedim :)
Uxonith

Son sıfır denetiminin mutlaka beklenen davranış olup olmadığını bilmiyorum. Null, boş bir dizeden çok farklı. Biri bunu uygulamak olsaydı, özel bir boş değer öneririm (örneğin: '[[NULL]]'). Undefined için bir istisna da istenebilir, ancak null değerini boş bir dize ile değiştirmemenizi tavsiye ederim.
Mart'ta Uxonith

Test ettim ve doğru olduğunu buldum. Bu, Chrome ve Opera'da işe yarıyor gibi görünüyor. Safari sadece içeriğe sahip bir sayfa açar. Internet Explorer ... IE. Durumum için, CSV sunucu tarafımı oluşturacağım ve üzücü şekilde bu şekilde hizmet edeceğim.
Uxonith

33

@Default'un çözümü Chrome'da mükemmel çalışıyor (bunun için çok teşekkürler!) Ancak IE ile ilgili bir sorunum vardı.

İşte bir çözüm (IE10 üzerinde çalışır):

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")

23

Chrome 35 güncellemesinde indirme özelliği davranışı değiştirildi.

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

bunu kromda çalışmak için kullanın

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();


Şu anda doğru cevap bu, kabul edilmiş olarak işaretlenmiş değil!
Miyav

17

Tüm diller için çalışma

        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', '日本語'],
    ])

Etkileyici! (1). StackOverflow'a hoş geldiniz dostum!
Rann Lifshitz

UTF-16 kod bloğunun ne olduğunu ve ne için kullanıldığını anlamama yardımcı olabilir misiniz?
Mar1009

Merhaba Mar1009. Bu, bazı diller için gereklidir. Örneğin Kiril alfabesi.
Serdar Didan

13

İşte böyle:

<!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>  

1
Müthiş cevap. Bunu bir sebepten dolayı kabul edilen cevap her şeyi tek bir sütuna koyduğu için destekliyorum. Bu, hepsini ayrı sütunlara ayırır ve JSON benzeri veri formatı desteği inanılmaz derecede faydalıdır.
Hoser

Bu, bağlantı ilk olarak belge gövdesine eklendiğinde ve ardından tıklatma çağrıldığında çalışır. Ve sonra dom'dan kaldırılır.
Jay Dubal

1
İyi cevap, tek dezavantajı veri sütun sınırlayıcı "," yani düzgün çalışmıyorsa yani Adres: '10 Sonsuz döngü şeritli, Oda 56 ', şerit sonrası virgül dikkat edin. Verileri CSV'ye dönüştürmek için PapaParse bağlantısını kullanmanızı ve ardından Gerçek dosya indirmesi için yukarıdaki downloadCSV yöntemini kullanmanızı öneririz
phil

Bu benim için mükemmel. Sadece bir sorun var, '000002342' gibi dizide bazı sayılar var ama csv ihraç, önde gelen sıfırlar kaldırılır. Bunu önlemenin bir yolu var mı?
Aakarsh Dhawan

13

Millet kendi özel csv dize, örneğin özel karakterler ve benzeri başarısız başarısız oluşturmak için çalışıyoruz, kesinlikle bu çözülmüş bir sorun değil mi?

papaparse - JSON - CSV kodlaması için kullanın. Papa.unparse().

import Papa from "papaparse";

const downloadCSV = (args) => {  

  let filename = args.filename || 'export.csv';
  let columns = args.columns || null;

  let csv = Papa.unparse({ data: args.data, fields: columns})
  if (csv == null) return;

  var blob = new Blob([csv]);
  if (window.navigator.msSaveOrOpenBlob)  // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
      window.navigator.msSaveBlob(blob, args.filename);
  else
  {
      var a = window.document.createElement("a");
      a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
      a.download = filename;
      document.body.appendChild(a);
      a.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
      document.body.removeChild(a);
  }

}

Örnek kullanım

downloadCSV({ 
  filename: 'filename.csv',
  data: [{'a': '1', 'b': 2'}],
  columns: ['a','b']
});

https://github.com/mholt/PapaParse/issues/175 - Tarayıcı desteği tartışması için bu yoruma bakın.


10

Javascript kullanarak diziyi CSV dosyasına vermek için aşağıdaki kod parçasını kullanabilirsiniz.

Bu, özel karakterler bölümünü de ele alır

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(); 

İşte çalışan jsfiddle bağlantısı


1
Özel karakterler için en iyi cevap
Alejandro

# (hashtag) çalışmıyor!
Nakres

7
//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

6

CSV verisi ile bir damla oluşturun. var blob = new Blob([data], type:"text/csv");

Tarayıcı lekelerin kaydedilmesini destekliyorsa if window.navigator.mSaveOrOpenBlob)===true, csv verilerini aşağıdakileri kullanarak kaydedin: window.navigator.msSaveBlob(blob, 'filename.csv')

Tarayıcı lekelerin kaydedilmesini ve açılmasını desteklemiyorsa, csv verilerini şu şekilde kaydedin:

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);

Tam Kod snippet'i:

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(); 
}

5

Burada iki soru var:

  1. Bir diziyi csv dizesine dönüştürme
  2. Bu dize bir dosyaya nasıl kaydedilir

Buradaki ilk sorunun tüm cevapları (Milimetrik tarafından verilenler hariç) aşırıya kaçmış gibi görünüyor. Ve Milimetrik olanı, dizeleri tırnak işaretleri ile çevrelemek veya nesnelerin dizilerini dönüştürmek gibi alternatif gereksinimleri kapsamaz.

İşte bu benim alır:

Basit bir csv için bir map () ve join () yeterlidir:

    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

Bu yöntem ayrıca iç birleşimde virgül dışında bir sütun ayırıcı belirtmenize olanak tanır. örneğin bir sekme:d.join('\t')

Öte yandan, düzgün bir şekilde yapmak ve "" tırnak işaretleri içine dizeleri eklemek istiyorsanız, o zaman bazı JSON büyüsünü kullanabilirsiniz:

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

aşağıdaki gibi bir dizi nesneniz varsa:

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, '');

Yanılmıyorsam, .replacekıvırcık ve köşeli parantez belirtmesi gerektiğine inanıyorum .
aaronbartell

.replacevalues()bir nesneyi alıp bir değer dizisi döndüren bir dize üzerinde yapılır
Konstantin

values()Ben kodunuzu çalıştığımızda yöntem bulunamadı.
aaronbartell

Teşekkürler! Chrome'da values()açıkça çağrılmadan çalışır Object. Örneği düzelttim.
Konstantin

5

Verileri CSV'ye dönüştürmek için çok sayıda kendi başına çözümünüz, ancak hemen hemen hepsi, Excel'i veya benzerlerini açmadan doğru biçimlendirecekleri veri türü açısından çeşitli uyarılara sahip olacaklar.

Neden kanıtlanmış bir şey kullanmıyorsunuz: Papa Parse

Papa.unparse(data[, config])

Daha sonra bunu buradaki yerel indirme çözümlerinden biriyle birleştirin. @ArneHB tarafından olan iyi görünüyor.


4

ES6 ile bir ok işlevi:

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

Sonra :

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

Herkesin buna ihtiyacı olması durumunda , react-csvbunun için var mı


3
react-csvKütüphane bir cazibe gibi çalışır. Modül kullanan herkes için mükemmel çözüm.
Matt Parrilla

Bu, CSV dosyasının içinde virgül bulunan alanların bulunduğu durumu gözlemleyemez.
unpollito

2

Java GWT uygulamamdaki istemci tarafında CSV dosyalarını nasıl indireceğim. Çözümü için Xavier John'a özel teşekkürler. FF 24.6.0, IE 11.0.20 ve Chrome 45.0.2454.99 (64 bit) sürümlerinde çalıştığı doğrulandı. Umarım bu biraz zaman kazandırır:

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);
            }
        }
    }-*/;
}

2

Aşağıdaki yerel bir js çözümdür.

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = [
    ['111', '222', '333'],
    ['aaa', 'bbb', 'ccc'],
    ['AAA', 'BBB', 'CCC']
  ];
  for (const row of rows) {
    const rowData = [];
    for (const column of row) {
      rowData.push(column);
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
<button onclick="export2csv()">Export array to csv file</button>


benim için mükemmel çalıştı. Teşekkürler!
Srijani Ghosh

1

İşte Açısal bir dostu sürüm:

  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)}`);
    }
  };

1

İşin Yukarıdaki cevaplar, ama .xls biçiminde açılıyor eğer columns ~~ kudreti ile ayrılmalıdır ~~ unutmayın '\t'yerine ','cevap, https://stackoverflow.com/a/14966131/6169225 iyi çalıştı benim .join('\t')yerine, dizilerde kullandığım sürece .join(',').


.xls dosyaları için iyi çalışır, BTW Metin çok uzun olduğunda ve sayfa çok iyi görünmüyor ızgara boyutunu aştığında, küçük bir sorun var, bunu çözmek için herhangi bir ipucu?
gabrielAnzaldo

1

string[][]Bir csv dosyasına dönüştürmek için bu işlevi kullanın . A ", a ,veya başka bir boşluk içeriyorsa (boşluklar hariç) bir hücreyi tırnak içine alır :

/**
 * 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

}

Not : mapçoklu doldurulmadıkça Internet Explorer <11 üzerinde çalışmaz .

Not : Hücreler sayı içeriyorsa, sayıları dizelere dönüştürmek için cell=''+cellönce ekleyebilirsiniz if (cell.replace....

Veya ES6'yı kullanarak tek bir satıra yazabilirsiniz:

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

1

PapaParse gibi bir kütüphane kullanmanızı tavsiye ederim: https://github.com/mholt/PapaParse

Kabul edilen cevapta şu anda birden fazla sorun var:

  • veriler virgül içeriyorsa başarısız olur
  • veriler bir satır sonu içeriyorsa başarısız olur
  • Veride tırnak işareti varsa (bir tür) başarısız olur

1

Bunu deneyin, buradaki cevapların bazıları unicode verileri ve örneğin tarih virgülüne sahip verileri işlemiyor.

function downloadUnicodeCSV(filename, datasource) {
    var content = '', newLine = '\r\n';
    for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
        var line = datasource_1[_i];
        var i = 0;
        for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
            var item = line_1[_a];
            var it = item.replace(/"/g, '""');
            if (it.search(/("|,|\n)/g) >= 0) {
                it = '"' + it + '"';
            }
            content += (i > 0 ? ',' : '') + it;
            ++i;
        }
        content += newLine;
    }
    var link = document.createElement('a');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

1

CSV Dosyasını İndir

  let csvContent = "data:text/csv;charset=utf-8,";
  rows.forEach(function (rowArray) {
    for (var i = 0, len = rowArray.length; i < len; i++) {
      if (typeof (rowArray[i]) == 'string')
        rowArray[i] = rowArray[i].replace(/<(?:.|\n)*?>/gm, '');
      rowArray[i] = rowArray[i].replace(/,/g, '');
    }

    let row = rowArray.join(",");
    csvContent += row + "\r\n"; // add carriage return
  });
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "fileName.csv");
  document.body.appendChild(link);
  link.click();

0

Herkes nakavt js için buna ihtiyacı varsa, temelde önerilen çözüm ile tamam çalışır:

html:

<a data-bind="attr: {download: filename, href: csvContent}">Download</a>

modeli görüntüle:

// for the download link
this.filename = ko.computed(function () {
    return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
    if (!this.csvLink) {
        var data = ko.unwrap(this.data),
            ret = 'data:text/csv;charset=utf-8,';

        ret += data.map(function (row) {
            return row.join(',');
        }).join('\n');

        return encodeURI(ret);
    }
}, this);

0

Gerekirse alan başlıklarını da dahil etmek için Xavier Johns fonksiyonuna ekledim, jQuery kullanıyor. $ .Each bitinin yerel bir javascript döngüsü için değiştirilmesi gerekir

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);
        }
    }
}

0

Bu, verilerin JSON'dan geleceği kabul edilen cevaba dayanan değiştirilmiş bir cevaptır.

            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();
        });

0

Gerçekten hızlı bir çözüm arıyorsanız, bu küçük kütüphaneye sizin için CSV dosyası oluşturacak ve indirecek bir şans da verebilirsiniz: https://github.com/mbrn/filefy

Kullanımı çok basit:

import { CsvBuilder } from 'filefy';

var csvBuilder = new CsvBuilder("user_list.csv")
  .setColumns(["name", "surname"])
  .addRow(["Eve", "Holt"])
  .addRows([
    ["Charles", "Morris"],
    ["Tracey", "Ramos"]
  ])
  .exportFile();
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.