在jQuery中导出到csv

Question

我动态生成一个div,如:

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

页面上还有更多元素.现在,我怎样才能获得这样的csv文件:

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

使用jQuery？

需要一个文件保存dailog框,如下所示:

谢谢.

Answer 1

您只能在客户端,在接受数据URI的浏览器中执行此操作:

data:application/csv;charset=utf-8,content_encoded_as_url

在您的示例中,数据URI必须是:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

您可以通过以下方式调用此URI:

• 运用 window.open
• 或设置 window.location
• 或者通过锚的href
• 通过添加下载属性,它将在chrome中工作,仍然需要在IE中进行测试.

要进行测试,只需复制上面的URI并粘贴到浏览器地址栏中即可.或者在HTML页面中测试下面的锚点:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

要创建内容,从表中获取值,您可以使用table2CSV并执行:

var data = $table.table2CSV({delivery:'value'});

$('<a></a>')
    .attr('id','downloadFile')
    .attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data))
    .attr('download','filename.csv')
    .appendTo('body');

$('#downloadFile').ready(function() {
    $('#downloadFile').get(0).click();
});

IE的大多数(如果不是全部)版本不支持导航到数据链接,因此必须实现hack,通常使用iframe.使用一个iFrame 联合document.execCommand('SaveAs'..),你可以得到的IE浏览器的大多数目前使用的版本类似的行为.

Answer 2

这是我的实现(基于:https://gist.github.com/3782074):

用法:HTML:

<table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

JS:

$("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

代码:

jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.push('"' + tmpStr + '"');
          });
          csvData.push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.push('"' + tmpStr + '"');
                  }
             });
          csvData.push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

备注:

• 它使用标题的"th"标签.如果它们不存在,则不添加它们.
• 此代码以以下格式检测数字: - ####.##(您需要修改代码以接受其他格式,例如使用逗号).

更新:

我以前的实现工作正常但它没有设置csv文件名.代码被修改为使用文件名,但它需要<a>元素.您似乎无法动态生成<a>元素并触发"click"事件(可能是安全性原因？).

DEMO

http://jsfiddle.net/nLj74t0f/

(不幸的是,jsfiddle无法生成文件,而是抛出错误:'请使用POST请求',不要让错误阻止您在应用程序中测试此代码).

Answer 3

我最近发布了一个免费软件库:"html5csv.js" - GitHub

它旨在帮助简化在Javascript中创建小型模拟器应用程序,可能需要导入或导出csv文件,操作,显示,编辑数据,执行各种数学过程,如拟合等.

加载"html5csv.js"后,扫描表格和创建CSV的问题是一个单行:

CSV.begin('#PrintDiv').download('MyData.csv').go();

这是使用此代码的示例的JSFiddle演示.

在内部,对于Firefox/Chrome,这是一个面向数据URL的解决方案,类似于@italo,@ lepe和@adeneo提出的解决方案(在另一个问题上).对于IE

该CSV.begin()调用设置系统以将数据读入内部数组.然后发生取出.然后在.download()内部生成数据URL链接,并使用链接点击器单击它.这会将文件推送给最终用户.

根据caniuse IE10不支持<a download=...>.因此对于IE我的库navigator.msSaveBlob()内部调用,正如@Manu Sharma所建议的那样

Answer 4

以下是仅从客户端触发下载问题的两个解决方法.在以后的浏览器中,你应该看看"blob"

1.拖放表格

你知道吗,你可以简单地将你的桌子拖到excel吗？

以下是如何选择要剪切和过去或拖动的表格

用Javascript选择一个完整的表(要复制到剪贴板)

2.从div创建一个弹出页面

虽然它不会生成保存对话框,但如果生成的弹出窗口以扩展名.csv保存,则Excel将正确处理它.

该字符串可以是
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
例如制表符分隔的行的换行符.

有些插件可以为您创建字符串 - 例如http://plugins.jquery.com/project/table2csv

var w = window.open('','csvWindow'); // popup, may be blocked though
// the following line does not actually do anything interesting with the 
// parameter given in current browsers, but really should have. 
// Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); // the csv string from for example a jquery plugin
w.document.close();

免责声明:这些是变通方法,并没有完全回答目前大多数浏览器都有答案的问题:仅在客户端上不可能