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:

26 thoughts on “Export HTML table as CSV file using JQuery”

  1. Pingback: 将html表导出到csv|jquery问答

  2. An alternative solution is to create a post request to the server, the server is just an echo server which use HTTP header “Content-Disposition”, “attachment” to force the client download the result

    Reply

    1. 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.

      Reply

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

    Reply

  5. 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.

    Reply

  9. 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…

    Reply

  10. 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.

    Reply

    1. 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.**

      Reply

  15. 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.

    Reply

  16. 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.

    Reply

    1. 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.

      Reply

Leave a reply to Gian Karlo Cancel reply