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

问题描述

我正在动态生成一个类似于:

<table id="mainTable"><tr><td>第 1 列</td><td>Col2</td><td>第 3 列</td></tr><tr><td>值1</td><td>瓦尔2</td><td>瓦尔3</td></tr><tr><td>瓦尔11</td><td>瓦尔22</td><td>瓦尔33</td></tr><tr><td>瓦尔111</td><td>瓦尔222</td><td>瓦尔333</td></tr>

页面上还有更多元素.现在，我如何获得这样的 csv 文件:

Col1,Col2,Col3值1、值2、值3Val11,Val22,Val33Val111,Val222,Val333

使用 jQuery 吗?

也需要一个文件保存对话框，像这样:

谢谢.

解决方案

您只能在客户端执行此操作，在接受 数据 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
• 通过添加 download 属性，它可以在 chrome 中工作，仍然需要在 IE 中进行测试.

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

要创建内容，从表中获取值，您可以使用 table2CSV 并做:

var data = $table.table2CSV({delivery:'value'});$('<a></a>').attr('id','downloadFile').attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(data)).attr('下载','文件名.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.

这篇关于在 jQuery 中导出到 csv的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！