views:

8430

answers:

6

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?

+2  A: 

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.

Franz
+6  A: 

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

?>
timborden
+1 Worked for me. Though, I ended up using $("body").append([enter-form-here]);
Eddie
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
A: 

Hi. I think that the best way is to send the data via POST. It is more secure.

nico
A: 

hi there.. this is work great on my mac (with compiled apache,php5,mysql,etc) but.. sadly this isn't work on my winXP with lighty2go client server.. hope you guy's there have some answer for my problem.. this is for output example:

On Mac :
subject1 subject2
result1 result2

on Win :
\"subject1\" \"subject2\"
\"result1\" \"result2\"

this is from function formatData(input) ? what exactly i must do with this function? thanks..

Mon5t3r
A: 

I GOT IT!!! i changed this value :

return '"' + output + '"';

to this :

return '' + output + '';

well done my friend.. many thanks for your mod function..

Mon5t3r
+1  A: 

Hi timborden, 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"]);
}
Zac