如何使用JQuery或Javascript数据导出为CSV [英] How to data Export to CSV using JQuery or Javascript

问题描述

我需要什么样的：
我们在这是以逗号deliminated值response.d值。现在我想response.d的数据导出到.csv文件。

我写了这个函数来执行此。我已收到response.d的数据，但不能导出到.csv文件，所以给这个问题以.csv文件导出数据的解决方案。

 函数BindSubDivCSV（）{
  $阿贾克斯（{
      键入：POST，
      网址：../../Web$c$cService.asmx / ShowTrackSectorDepartureList
      数据：{}，
      的contentType：应用/ JSON的;字符集= UTF-8，
      数据类型：JSON
      成功：函数（响应）{
        警报（response.d）; //导出为CSV格式的功能，这里需要
      }，
      错误：功能（数据）{}
  }）;
  返回false;
}
 

解决方案

在情况下，您对如何在服务器端的作品无法控制，这里是我在另一个SO问题都提供了一个客户端解决方案，为待定OP接受：导出为CSV使用jQuery和HTML

有一定的要求和限制，你将不得不考虑，正如我在我的答案在那里，它有更多的细节提及。

---

这是相同的演示我已提出：
http://jsfiddle.net/terryyounghk/KPEGU/

和给你什么样的剧本看起来像一个粗略的想法。

你需要改变的是你如何遍历你的数据（在其他问题的情况下，它是表格单元格）来构造一个有效的CSV字符串。这应该是微不足道的。

$（文件）。就绪（函数（）{

 函数exportTableToCSV（$表，文件名）{        变量$行= $ table.find（'TR：有（TD））            //临时分隔符不可能通过键盘键入
            //这是为了避免意外分裂的实际内容
            tmpColDelim = String.fromChar code（11），//垂直制表符
            tmpRowDelim = String.fromChar code（0），//空字符            //为CSV格式的实际分隔符
            colDelim ='，'，
            rowDelim =\\ r \\ n'，            //抓斗从文本到表CSV格式的字符串
            CSV ='+ $ rows.map（功能（我行）{
                VAR $行= $（行）
                    $ COLS = $ row.find（'TD'）;                返回$ cols.map（函数（J，COL）{
                    变量$ COL = $（COL）
                        文字= $ col.text（）;                    返回text.replace（''，，）; //逃脱双引号                }）获得（）连接（tmpColDelim）。            }）。获得（）。加入（tmpRowDelim）
                .split（tmpRowDelim）。加入（rowDelim）
                .split（tmpColDelim）。加入（colDelim）+''，            //数据URI
            csvData ='数据：应用程序/ CSV;字符集= UTF-8，'+ EN codeURIComponent（CSV）;        $（本）
            .attr（{
            下载：文件名，
                HREF：csvData，
                目标：_blank
        }）;
    }    //这必须是一个超级链接
    $（出口）。在（'点击'，功能（事件）{
        // CSV
        exportTableToCSV.apply（这一点，[$（'＃dvData＆GT;表），export.csv']）;        //如果CSV，不做大事。preventDefault（）或返回false
        //实际上，我们需要这是一个典型的超级链接
    }）;
}）;
 

What I needed: We have value in the response.d that is comma deliminated value. Now I want to export the data of response.d to .csv file.

I have written this function to perform this. I have received the data in response.d but not exporting to the .csv file, so give the solution for this problem to export data in .csv file.

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

解决方案

In case you have no control over how the server-side works, here is a client-side solution that I have offered in another SO question, pending for that OP's acceptance: Export to CSV using jQuery and html

There are certain restrictions or limitations you will have to consider, as I have mentioned in my answer over there, which has more details.

---

This is the same demo I have offered: http://jsfiddle.net/terryyounghk/KPEGU/

And to give you a rough idea of what the script looks like.

What you need to change is how you iterate your data (in the other question's case it was table cells) to construct a valid CSV string. This should be trivial.

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

这篇关于如何使用JQuery或Javascript数据导出为CSV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！