jQuery 表到 CSV 导出答案

【问题标题】：jQuery Table to CSV exportjQuery 表到 CSV 导出
【发布时间】：2009-05-28 14:10:19
【问题描述】：

我正在使用 jQuery Table to CSV 插件。我已经更改了弹出窗口，以便它告诉浏览器下载 CSV 文件。

原来是：

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; 
}

我已将其更改为：

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

它在大多数情况下都有效。它仍然需要您找到您的电子表格软件，并创建自己的文件名...因为它会创建一个奇怪的文件名（例如：14YuskG_.csv.part）。

有什么改进的建议吗？

【问题讨论】：

jQuery 表格到 CSV 插件：kunalbabre.com/projects/table2CSV.php，感谢 Kunal Babre

标签： javascript jquery

【解决方案1】：

找到一个可行的解决方案（在http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/ 的帮助下）：

我把函数改成：

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; 
}

并创建了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'];

?>

更新： 更适合 IE7 的版本：

<?php

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

    print $_POST['exportdata'];

?>

【讨论】：

+1 为我工作。不过，我最终使用了 $("body").append([enter-form-here]);
虽然请注意，这需要所有数据的服务器往返。如果您在客户端上有大量数据，这不是最佳选择。
这显然是不好的做法。如果你打算使用不干净的客户端数据，你至少应该避免让服务器参与其中。所以要么从服务器生成数据并回显它，要么直接用js做。
@Morg。看看我的回答stackoverflow.com/a/19988796/439171没有服务器端！但不完全兼容所有浏览器。
@italo 谢谢我已经尝试过了，但它真的很差，而且效果不佳。我确实在 Flash 中找到了可以完成这一切的东西（jQuery dataTables tableTools 的基础）。

【解决方案2】：

感谢您的提问和回答，对我来说效果很好。这是我正在使用的解决方案的（几乎相同的）ASP.Net 版本：

将 table2CSV.js 弹出函数更改为：

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;
}

注意从 export.php 到 .ashx 通用处理程序的变化。

通用处理程序代码：

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

【讨论】：

【解决方案3】：

我不建议以这种方式“下载”CSV 数据。 IE7 只允许地址栏中最多包含 2000 个字符，因此您的文件被截断的可能性很高。

【讨论】：

【解决方案4】：

不兼容所有浏览器，但不需要服务器端！试试下面的代码using JSFiddle 并告诉我们它是否在您的浏览器中运行。

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

【讨论】：

【解决方案5】：

我强烈推荐使用http://datatables.net/extras/tabletools/，它让玩桌子很容易

【讨论】：