Jak eksportować dane do pliku CSV za pomocą JQuery lub Javascriptu

Question

Co było mi potrzebne: Mamy wartość w response.d, która jest wartością oddzielaną przecinkami. Teraz chcę wyeksportować dane z pliku response.d do pliku .csv.

Napisałem tę funkcję, aby to wykonać. Otrzymałem dane w odpowiedzi.d, ale nie eksportowałem do pliku .csv, więc daj rozwiązanie tego problemu, aby wyeksportować dane do pliku .csv.

function BindSubDivCSV(){ 
    $.ajax({ 
     type: "POST", 
     url: "../../WebCodeService.asmx/ShowTrackSectorDepartureList", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (response) { 
     alert(response.d);//export to csv function needed here 
     }, 
     error: function (data) {} 
    }); 
    return false; 
} 

Answer 1

W przypadku, gdy nie ma żadnej kontroli nad tym, jak działa po stronie serwera, tutaj jest po stronie klienta rozwiązanie, które ja oferowane w innym SO pytanie, w oczekiwaniu na potwierdzenie, że OP: Export to CSV using jQuery and html

Tam są pewne ograniczenia lub ograniczenia, które musisz wziąć pod uwagę, o czym wspomniałem w mojej odpowiedzi, która zawiera więcej szczegółów.

---

Jest to ta sama demo Ofiarowałem: http://jsfiddle.net/terryyounghk/KPEGU/

I dać z grubsza co skrypt wygląda.

To, co musisz zmienić, to jak wykonać iterację danych (w przypadku drugiego pytania były to komórki tabeli), aby utworzyć prawidłowy ciąg znaków CSV. To powinno być banalne.

$(document).ready(function() { 

    function exportTableToCSV($table, filename) { 

     var $rows = $table.find('tr:has(td)'), 

      // Temporary delimiter characters unlikely to be typed by keyboard 
      // This is to avoid accidentally splitting the actual contents 
      tmpColDelim = String.fromCharCode(11), // vertical tab character 
      tmpRowDelim = String.fromCharCode(0), // null character 

      // actual delimiter characters for CSV format 
      colDelim = '","', 
      rowDelim = '"\r\n"', 

      // Grab text from table into CSV formatted string 
      csv = '"' + $rows.map(function (i, row) { 
       var $row = $(row), 
        $cols = $row.find('td'); 

       return $cols.map(function (j, col) { 
        var $col = $(col), 
         text = $col.text(); 

        return text.replace('"', '""'); // escape double quotes 

       }).get().join(tmpColDelim); 

      }).get().join(tmpRowDelim) 
       .split(tmpRowDelim).join(rowDelim) 
       .split(tmpColDelim).join(colDelim) + '"', 

      // Data URI 
      csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 

     $(this) 
      .attr({ 
      'download': filename, 
       'href': csvData, 
       'target': '_blank' 
     }); 
    } 

    // This must be a hyperlink 
    $(".export").on('click', function (event) { 
     // CSV 
     exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']); 

     // IF CSV, don't do event.preventDefault() or return false 
     // We actually need this to be a typical hyperlink 
    }); 
}); 

Answer 2

Stosując powyższy kod (od Terry Younga) Okazało się, że w Operze byłoby odmówić plikowi nazwę (po prostu nazywając go „do pobrania”) i nie zawsze działa niezawodnie.

Aby zmusić go do pracy musiałem stworzyć binarny blob:

var filename = 'file.csv'; 
    var outputCSV = 'entry1,entry2,entry3'; 
    var blobby = new Blob([outputCSV], {type: 'text/plain'}); 

    $(exportLink).attr({ 
       'download' : filename, 
       'href': window.URL.createObjectURL(blobby), 
       'target': '_blank' 
       }); 

    exportLink.click(); 

Należy również zauważyć, że tworzenie „exportLink” zmienną w locie nie będzie działać z Firefoksem, więc musiałem mieć to w moim HTML plik:

<div> 
     <a id="exportLink"></a> 
    </div> 

Korzystanie z powyższym mam z powodzeniem przetestowane w systemie Windows 7 64bit i Opera (V22), Firefox (v29.0.1) oraz Chrome (v35.0.1916.153 m).

Aby umożliwić podobną funkcjonalność (choć w znacznie mniej elegancki sposób) w przeglądarce Internet Explorer musiałem użyć funkcji Downloadify.