Home > jquery > Export HTML table as CSV file using JQuery

Export HTML table as CSV file using JQuery

Put this code into a script section into a common HTML head include file:

$(document).ready(function() {

  $('table').each(function() {
    var $table = $(this);

    var $button = $("<button type='button'>");
    $button.text("Export to spreadsheet");
    $button.insertAfter($table);

    $button.click(function() {
      var csv = $table.table2CSV({delivery:'value'});
      window.location.href = 'data:text/csv;charset=UTF-8,'
                            + encodeURIComponent(csv);
    });
  });
})

Note:

Advertisements
Categories: jquery
  1. June 23, 2012 at 23:48

    It doesn’t seem to work in Chrome. It does in Firefox, Opera, and kind of in Safari. In Chrome it doesn’t pop up a window or create a new tab.

    • June 24, 2012 at 00:01

      Thanks for the feedback, Don! I will have a look at that if I find the time. If you can fix the problem with Chrome, please post another comment here.

  2. June 24, 2012 at 00:37

    Yes it probably is a Chrome bug but it’s quite annoying when I tell everyone to use Chrome instead of FF or IE.

    It does work on Chrome 18 because that’s what I’m running on my Linux box. My Mac and my Windows are both 19 so I’m sure that’s why they aren’t working. Hopefully they will fix it in the next release.

  3. June 24, 2012 at 00:44

    It also works fine on Chrome Canary.

  4. July 12, 2012 at 11:16

    Any fix to the Chrome Bug?

  5. July 12, 2012 at 23:52

    Yes this was fixed in the next release of Chrome.

  6. July 21, 2012 at 09:57

    Great to hear Chrome was fixed.. Any word on the latest IE versions?

    • July 21, 2012 at 11:46

      In IE, Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements. In particular, the JavaScript based HTML table to CSV “download” (via Data: URI) approach that I described cannot be used with IE.

      Quoting from http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx :

      Data URIs are supported only for the following elements and/or attributes.

      object (images only)
      img
      input type=image
      link
      CSS declarations that accept a URL, such as background, backgroundImage, and so on.

      Data URIs can be nested.

      For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.

      Data URIs cannot be larger than 32,768 characters.

      The resource data must be properly encoded; otherwise, an error occurs and the resource is not loaded. The “#” and “%” characters must be encoded, as well as control characters, non-US ASCII characters, and multibyte characters.

      For more information, see RFC2397: The “data” URL scheme.

      Available as of Windows Internet Explorer 8 or later.**

  7. July 21, 2012 at 11:27

    I wouldn’t hold my breath. Microsoft doesn’t believe they need to do anything to their browser just because it doesn’t work like all the others.

  8. July 21, 2012 at 13:43

    Ok, thanks guys. Another issue I have:

    In Firefox, this is what I get after I click the export button:
    http://imgur.com/a/rQnk6

    If I change .part to .csv, it does open correctly. Not sure what the deal is there…

    In Chrome: http://imgur.com/0vY09
    Again, if I add .csv it still opens correctly (the data is correct).

    In IE, of course nothing works, as you know =)

    If I could fix Chrome/FF to add the extension and give it a typical name, I’d be halfway there. If you guys can help me figure out a way to get this to work in all browsers, I’d be 100% there, ha! I’d be ok sending the data to another .php file which would set the correct browser headers for download, but that is beyond me in jQuery…

  9. July 21, 2012 at 22:19

    Argh, well that’s no good… what would be a way forward to just get this to prompt in a logical fashion to the user?

  10. July 22, 2012 at 10:43

    You know what I never realized, the server-side PHP solution with this is a really good one (option 3.1) here: http://www.kunalbabre.com/projects/table2CSV.php . The example on the webpage doesn’t quite work, but luckily I know PHP better than I know jQuery =). I got it working on all browsers really well. Thanks all.

  11. flexic
    August 13, 2012 at 17:23

    odoepner :
    Seems like the situation regarding file names (and file extensions) is unsatisfying, to say the least.

    Oof, that hurts. Well what options are there for setting the filename, post to the server and have it post back with a filename?

  12. Gian Karlo
    September 11, 2012 at 02:02

    I have a working export to CSV using this plugin but I have a problem while using the picnet.table.filter.js.

    Below the headers, it shows the tooltip message from table filter then data. how can I eliminate the weird characters “, <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, ",", <=, "
    that came from the table filter?

    Thanks.

  13. Miguel
    September 28, 2012 at 07:21

    This only worked for me in FF, not in Safari or Chrome. I ended up using Downloadify combined with table2CSV, works perfect!

  14. January 31, 2014 at 06:59

    it is not working at all.

    • January 31, 2014 at 13:29

      Please read all the comments on this post. Browser support for “data URIs” is limited. What I describe is definitely not a cross-browser solution because it won’t work in IE.

      And for browsers like Chrome and Firefox you cannot control the file name the CSV file will be saved under.

      Also, this has only been tested on JQuery 1.7, I think. Maybe something broke in the meantime.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: