Question

188

Export to csv in jQuery

rated 0 times [ 195] [ 7] / answers: 1 / hits: 131169 / 14 Years ago, sun, january 9, 2011, 12:00:00

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 :

alt

Thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mickaylag

Add To Favorites

Follow

Total Points: 333

Total Questions: 108

Total Answers: 93

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

mickaylag questions

1 How to create phone format input in HTML if it's possible with country code

Wed, Jul 27, 22, 00:00, 2 Years ago

1 Checking whether array has a number bigger than specified

Sun, Aug 15, 21, 00:00, 3 Years ago

1 Specifying the origin header in postman does nothing when I make a request to an endpoint in my application (javascript and nodejs)

Wed, Jul 14, 21, 00:00, 3 Years ago

1 Vue 3, call $emit on variable change

Mon, Mar 22, 21, 00:00, 3 Years ago

1 How to change color of text based on text-value by using css?

Thu, May 21, 20, 00:00, 4 Years ago

View All

answered 14 Years ago kylie · Accepted Answer

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.