jQuery 表到 CSV 导出

IT技术 javascript jquery
2021-03-02 06:32:49

我正在使用 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）。

关于如何改进这一点的任何建议？

5个回答

找到了一个有效的解决方案（在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'];

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

感谢您的提问和回答，对我来说效果很好。这是我正在使用的解决方案的（几乎相同的）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"]);
}

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

不兼容所有浏览器，但不需要服务器端！使用 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();
});

我强烈建议使用http://datatables.net/extras/tabletools/，它可以很容易地使用表格

其它你可能感兴趣的问题
上一篇什么是文本节点，它的用途？//document.createTextNode() 下一篇你如何清除javascript中的焦点？