如何使用 JQuery 或 Javascript 将数据导出到 CSV答案

【问题标题】：How to data Export to CSV using JQuery or Javascript如何使用 JQuery 或 Javascript 将数据导出到 CSV
【发布时间】：2013-04-11 12:36:26
【问题描述】：

我需要什么： 我们在 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;
}

【问题讨论】：

所以给出这个问题的解决方案听起来要求很高：|
您好 dbf，我并不要求我的朋友只是寻求解决我的问题。你能帮忙吗？
当您将数据发送到服务器时，您应该在 asp.net 中对其进行处理并发送带有 mime 类型“text/csv”的响应标头 - 这将使其成为可下载的电子表格

标签： javascript jquery asp.net export-to-csv

【解决方案1】：

如果您无法控制服务器端的工作方式，这是我在另一个 SO 问题中提供的客户端解决方案，等待该 OP 的接受：Export to CSV using jQuery and html

您必须考虑某些限制或限制，正如我在那边的回答中提到的那样，其中包含更多详细信息。

这与我提供的 demo 相同： 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
    });
});

【讨论】：

【解决方案2】：

使用上面的代码（来自 Terry Young），我发现在 Opera 中它会拒绝为文件命名（简单地称之为“下载”）并且不会总是可靠地工作。

为了让它工作，我必须创建一个二进制 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();

另请注意，动态创建“exportLink”变量不适用于 Firefox，因此我必须在我的 HTML 文件中包含它：

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

使用上述方法，我已经使用 Windows 7 64bit 和 Opera (v22)、Firefox (v29.0.1) 和 Chrome (v35.0.1916.153 m) 成功测试了它。

为了在 Internet Explorer 上启用类似的功能（尽管方式不太优雅），我不得不使用 Downloadify。

【讨论】：