导出到js中的csv
我dynamic生成一个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框，就像这样：
谢谢。
您只能在接受数据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
- 通过添加下载属性它将工作在铬，仍然必须在IE中testing。
要testing，只需复制上面的URI并粘贴到您的浏览器地址栏。 或者在HTML页面中testing下面的锚点：
<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>
要创build内容，从表中获取值，可以使用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版本不支持导航到数据链接，因此必须实施攻击，通常使用iframe 。 使用iFrame 与document.execCommand('SaveAs'..)结合使用 ，您可以在大多数当前使用的IE版本上获得类似的行为。
这是我的实现（基于： 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>元素。 看来你不能dynamic地生成<a>元素并且触发“click”事件（也许安全原因？）。
DEMO
（不幸的是，jsfiddle无法生成文件，而是抛出一个错误：'请使用POST请求'，不要让这个错误阻止你在你的应用程序中testing这个代码）。
我最近发布了一个免费的软件库： “html5csv.js” – GitHub
它旨在帮助简化在Javascript中创build小模拟器应用程序，这些应用程序可能需要导入或导出csv文件，操作，显示，编辑数据，执行各种math过程，如拟合等。
加载“html5csv.js”后，扫描表格和创buildCSV的问题是一个单一的问题：
CSV.begin('#PrintDiv').download('MyData.csv').go();
下面是这个代码示例的JSFiddle演示 。
在内部，对于Firefox / Chrome，这是一个面向数据的URL解决scheme，类似于@italo，@lepe和@ adeneo（另一个问题）提出的解决scheme。 对于IE
CSV.begin()调用将系统设置为将数据读入内部数组。 然后发生。 然后， .download()在内部生成一个数据URL链接，并通过链接点击器进行点击。 这将文件推送给最终用户。
根据caniuse IE10不支持（ <a download=...> 。 所以对于IE，我的库在内部调用navigator.msSaveBlob() ，正如@Manu Sharma所build议的那样
下面是两个从客户端触发下载问题的方法 。 在以后的浏览器中，你应该看看“blob”
1.拖放表格
你知道你可以简单地把你的表拖入excel吗？
这里是如何select表格来剪切和过去或拖动
用Javascriptselect一个完整的表格（复制到剪贴板）
2.从你的div创build一个popup页面
尽pipe不会生成保存对话框 ，但如果生成的popup窗口以扩展名.csv保存，则Excel将正确处理它。
string可以是
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
例如制表符分隔的行换行。
有插件可以为你创buildstring – 比如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();
免责声明 ：这些是变通办法，并没有完全回答目前大多数浏览器的答案的问题：不可能在客户端上
通过只使用jQuery，你不能避免一个服务器调用。
但是，为了达到这个效果，我使用了Downloadify ，它可以让我保存文件，而不必进行另一个服务器调用。 这样做可以减less服务器负载并提供良好的用户体验。
为了得到一个正确的CSV，你只需要拿出所有不需要的标签，并在数据之间加上一个“，”。
你不能在这里避免一个服务器调用，JavaScript根本就不能（为了安全起见）把一个文件保存到用户的文件系统中。 您必须将您的数据提交给服务器，并直接发送.csv作为链接或附件。
HTML5有这样的能力 （虽然保存真的没有指定 – 只是一个用例，如果你愿意的话可以读取这个文件），但是现在还没有跨浏览器的解决scheme。
只要尝试下面的代码…非常简单，用HTML表格的值生成CSV。 没有浏览器问题会来
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://www.csvscript.com/dev/html5csv.js"></script> <script> $(document).ready(function() { $('table').each(function() { var $table = $(this); var $button = $("<button type='button'>"); $button.text("Export to CSV"); $button.insertAfter($table); $button.click(function() { CSV.begin('table').download('Export.csv').go(); }); }); }) </script> </head> <body> <div id='PrintDiv'> <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </div> </body> </html>
