简体   繁体   English

jQuery表到CSV导出

[英]jQuery Table to CSV export

I'm using the jQuery Table to CSV Plugin. 我正在使用jQuery Table to CSV Plugin。 I've altered the popup so that it tells the browser to download a CSV file. 我已经更改了弹出窗口,以便它告诉浏览器下载CSV文件。

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). 它仍然需要您找到您的电子表格软件,并创建自己的文件名...因为它会创建一个奇怪的文件名(例如:14YuskG_.csv.part)。

Any suggestions on how to improve this? 关于如何改进这个的任何建议?

Found a solution that works (with help from http://www.topsemtips.com/2008/11/save-html-table-to-excel-using-jquery/ ): 找到一个有效的解决方案(在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: 并创建了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: 更新:更加IE7友好版本:

<?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: 这是我正在使用的解决方案的(几乎相同的)ASP.Net版本:

Change table2CSV.js popup function to: 将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;
} 

Noting the change from export.php to a .ashx generic handler. 注意到从export.php到.ashx泛型处理程序的更改。

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. 我不建议以这种方式“下载”CSV数据。 IE7 only allows up to 2000 characters in the address bar, so chances are high that your file gets truncated. IE7在地址栏中最多只允许2000个字符,因此文件被截断的可能性很高。

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. 使用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/ ,它很容易玩桌子

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM