Как экспортировать данные в CSV с помощью JQuery или Javascript

Question

Что мне нужно: У нас есть значение в response.d, которое имеет значение с запятой. Теперь я хочу экспортировать данные response.d в CSV-файл.

Я написал эту функцию, чтобы выполнить это. Я получил данные в response.d, но не экспортировал в .csv-файл, поэтому дайте решение этой проблемы экспортировать данные в 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

В случае, если вы не имеете никакого контроля над тем, как работает на стороне сервера, здесь на стороне клиента решение, которое я предложил в другой SO вопрос, в ожидании для принятия этого ФП в: Export to CSV using jQuery and html

Там будут определенные ограничения или ограничения, которые вам придется рассмотреть, как я уже упоминал в своем ответе, в котором содержится более подробная информация.

---

Это же демо я предложил: http://jsfiddle.net/terryyounghk/KPEGU/

И, чтобы дать вам общее представление о том, что сценарий выглядит.

Что нужно изменить, так это то, как вы перебираете свои данные (в случае другого вопроса - это ячейки таблицы), чтобы построить допустимую строку CSV. Это должно быть тривиально.

$(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

Используя приведенный выше код (от Терри Янг) я обнаружил, что в Opera он откажет дать файлу имя (просто назвав его «загрузить») и будет работать не всегда надежно.

Чтобы заставить его работать, я должен был создать блоб:

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

также отметить, что создание «exportLink» переменную на лету не будет работать с Firefox, так что я должен был иметь это в моем HTML файл:

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

используя выше я успешно проверил это с помощью Windows 7 64bit и Opera (V22), Firefox (v29.0.1) и хром (v35.0.1916.153 м).

Чтобы включить аналогичную функциональность (хотя и в гораздо менее элегантной форме) в Internet Explorer, мне пришлось использовать Downloadify.