导出到csv在jQuery [英] Export to csv in jQuery

问题描述

我动态生成一个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框，如下：

感谢。

noreferrer>数据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.csvhref =data：application / csv; charset = utf-8，Col1％2CCol2％2CCol3％0AVal1％2CVal2％2CVal3％0AVal11％2CVal22％2CVal33％0AVal111％2CVal222％2CVal333实施例< 
  

要创建内容，从表中获取值，可以使用 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版本上获得类似的行为。

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屋！