导出为CSV jQuery中 [英] Export to csv in jQuery
问题描述
我动态生成一个div是这样的：
＆LT; DIV ID ='PrintDiv'＆GT;
＆LT;表ID =mainTable＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
COL1
＆LT; / TD＆GT;
＆所述; TD＆GT;
COL2
＆LT; / TD＆GT;
＆所述; TD＆GT;
COL3
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
VAL1
＆LT; / TD＆GT;
＆所述; TD＆GT;
VAL2
＆LT; / TD＆GT;
＆所述; TD＆GT;
VAL3
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
VAl11难
＆LT; / TD＆GT;
＆所述; TD＆GT;
Val22
＆LT; / TD＆GT;
＆所述; TD＆GT;
Val33
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT;
Val111
＆LT; / TD＆GT;
＆所述; TD＆GT;
Val222
＆LT; / TD＆GT;
＆所述; TD＆GT;
Val333
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
和有页面上的很多元素。
现在，我怎样才能得到一个CSV文件是这样的：
COL1，col2的，COL3
VAL1，VAL2，VAL3
VAl11难，Val22，Val33
Val111，Val222，Val333
使用jQuery？
需要一个文件保存dailog箱子太像这样的：
感谢。
您可以做到这一点只在客户端，浏览器接受的数据URI ：
数据：应用程序/ CSV;字符集= UTF-8，content_en coded_as_url
在您的例子中，数据的URI必须是：
<$p$p><$c$c>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页面：
＆LT;下载=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数据= $ table.table2CSV（{交货：'值'}）;$（'＆所述a取代;＆下; / A＆GT;'）
.attr（'身份证'，'downloadFile'）
.attr（'HREF'，'数据：文本/ CSV;字符集= UTF8，'+ EN codeURIComponent（数据））
.attr（'下载'，'filename.csv'）
.appendTo（身体）;$（'＃downloadFile'）。就绪（函数（）{
$（'＃downloadFile'）得到（0）。点击（）。
}）;
大多数情况下，如果不是全部，IE的版本不支持导航到数据链路，所以黑客必须实现，经常有 IFRAME 。使用的iFrame 与组合document.execCommand（'另存为..） ，你可以得到IE的大多数目前使用的版本类似的行为。
I am dynamically generating a div which is like :
<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>
And there are lot more elements on the page as well. Now, how can i get a csv file like this :
Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333
using jQuery ?
need a file save dailog box too,like this :
Thanks.
You can do that in the client side only, in browser that accept Data URIs:
data:application/csv;charset=utf-8,content_encoded_as_url
In your example the Data URI must be:
data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333
You can call this URI by:
- using
window.open - or setting the
window.location - or by the href of an anchor
- by adding the download attribute it will work in chrome, still have to test in IE.
To test, simply copy the URIs above and paste in your browser address bar. Or test the anchor below in a HTML page:
<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>
To create the content, getting the values from the table, you can use table2CSV and do:
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();
});
Most, if not all, versions of IE don't support navigation to a data link, so a hack must be implemented, often with an iframe. Using an iFrame combined with document.execCommand('SaveAs'..), you can get similar behavior on most currently used versions of IE.
这篇关于导出为CSV jQuery中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
