Menu
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?
776
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'];
?>
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"]);
}
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.
27
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
