30

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?

1

5 Answers 5

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'];

?>
5
  • +1 Worked for me. Though, I ended up using $("body").append([enter-form-here]);
    – Eddie
    Aug 27, 2010 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, 2010 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, 2012 at 9:23
  • @Morg. take a look at my answer stackoverflow.com/a/19988796/439171 No sever side! But not full compatible with all brwosers. Nov 14, 2013 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, 2013 at 9:51
7

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"]);
}
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.

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

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.