jQuery Table to CSV export

Question

I'm using the jQuery Table to CSV Plugin. I've altered the popup so that it tells the browser to download a CSV file.

It was:

function popup(data) {
  var generator = window.open('', 'csv', 'height=400,width=600'); 
  generator.document.write('<html><head><title>CSV</title>'); 
  generator.document.write('</head><body >'); 
  generator.document.write('<textArea cols=70 rows=15 wrap="off" >'); 
  generator.document.write(data); 
  generator.document.write('</textArea>'); 
  generator.document.write('</body></html>'); 
  generator.document.close();
  return true; 
}

I've changed it to:

function popup(data) {
  window.location='data:text/csv;charset=utf8,' + encodeURIComponent(data);
  return true; 
}

It works, for the most part. It still requires that you find your spreadsheet software, and create your own filename...because it creates a strange file name (Example: 14YuskG_.csv.part).

Any suggestions on how to improve this?

jQuery Table to CSV Plugin: http://www.kunalbabre.com/projects/table2CSV.php, thanks Kunal Babre — timborden, May 28 '09 at 14:10

timborden · Accepted Answer · 2009-06-11T19:36:34.267

20

Found a solution that works (with help from http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/):

I changed the function to:

function popup(data) {
    $("#main div.inner").append('<form id="exportform" action="export.php" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>');
    $("#exportdata").val(data);
    $("#exportform").submit().remove();
    return true; 
}

And created the file export.php:

<?php

    header("Content-type: application/vnd.ms-excel; name='excel'");
    header("Content-Disposition: filename=export.csv");
    header("Pragma: no-cache");
    header("Expires: 0");

    print $_REQUEST['exportdata'];

?>

Update: A more IE7 friendly version:

<?php

    header('Content-Type: application/force-download');
    header('Content-disposition: attachment; filename=filename.csv');

    print $_POST['exportdata'];

?>

edited Jun 11 '09 at 19:36

answered May 28 '09 at 15:51

timborden

1,470
4
18
24

+1 Worked for me. Though, I ended up using $("body").append([enter-form-here]); – Eddie Aug 27 '10 at 17:52
5

Although note that this requires a server round-trip of all the data. If you've got a lot of data on the client, this is not optimal. – desau Oct 26 '10 at 23:04
5

This is clearly bad practice. If you're going to use unclean client-side data, you should at least avoid involving the server in that. So either generate data from server and echo it or simply do it with js directly. – Morg. Apr 23 '12 at 09:23
@Morg. take a look at my answer http://stackoverflow.com/a/19988796/439171 No sever side! But not full compatible with all brwosers. – Italo Borssatto Nov 14 '13 at 21:45
@italo thanks I had already tried that but it's really subpar and doesn't work that great. I did find something in flash that does it all though (the basis for jQuery dataTables tableTools). – Morg. Nov 15 '13 at 09:51

score 7 · Answer 2 · answered Aug 03 '10 at 11:14

thanks for your question and answer, worked well for me. Here is the (almost identical) ASP.Net version of your solution that I'm using:

Change table2CSV.js popup function to:

function popup(data) {
       $("body").append('<form id="exportform" action="CsvExport.ashx" method="post" target="_blank"><input type="hidden" id="exportdata" name="exportdata" /></form>');
       $("#exportdata").val(data);
       $("#exportform").submit().remove();
       return true;
}

Noting the change from export.php to a .ashx generic handler.

The generic handler code:

 public void ProcessRequest (HttpContext context) {
    context.Response.ContentType = "application/force-download";
    context.Response.AddHeader("content-disposition", "filename=filename.csv");

    context.Response.Write(context.Request.Form["exportdata"]);
}

score 6 · Answer 3 · answered May 28 '09 at 15:00

6

I don't recommend to "download" CSV data this way. IE7 only allows up to 2000 characters in the address bar, so chances are high that your file gets truncated.

answered May 28 '09 at 15:00

Franz

1,324
8
2

Italo Borssatto · Answer 4 · 2013-11-14T21:58:59.383

1

Not compatible with all browsers, but no server side needed! Try the code below using JSFiddle and tell us if it is running in your browser.

$('<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();
});

edited Nov 14 '13 at 21:58

answered Nov 14 '13 at 21:29

Italo Borssatto

15,044
7
62
88

score 0 · Answer 5 · answered Mar 09 '12 at 20:40

0

I highly recommend using http://datatables.net/extras/tabletools/, it makes is very easy to play around with tables

answered Mar 09 '12 at 20:40

Kavin Mehta

810
10
18

jQuery Table to CSV export

5 Answers5

Linked