2009-05-28 14 views
30

私はCSVプラグインにjQueryテーブルを使用しています。ポップアップを変更して、ブラウザにCSVファイルをダウンロードさせるように指示しました。jQueryテーブルから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)が作成されるため、スプレッドシートソフトウェアを見つけて独自のファイル名を作成する必要があります。

これを改善する方法についてのご意見はありますか?

+4

CSVプラグインのjQueryの表:http://www.kunalbabre.com/projects/table2CSV.php、感謝クナルBabre – timborden

答えて

20

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

?> 
+0

+1は、私のために働きました。しかし、私は$( "body")を使い終わった。append([enter-form-here]); – Eddie

+5

これには、すべてのデータのサーバーラウンドトリップが必要であることに注意してください。クライアント上にたくさんのデータがある場合、これは最適ではありません。 – desau

+5

これは明らかに悪い習慣です。あなたが不潔なクライアント側のデータを使うつもりなら、少なくともそれにサーバを関与させないでください。だから、サーバーからデータを生成してそれをエコーするか、単純にjsで直接行うかのどちらかです。 –

6

このようにCSVデータを「ダウンロード」することはお勧めできません。 IE7ではアドレスバーに最大2000文字しか入力できないため、ファイルが切り捨てられる可能性が高くなります。

7

あなたの質問と回答に感謝して、私のためにうまくいった。

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

.ashxへexport.phpからの変化に着目し、ここで私が使用しているソリューションの(ほぼ同じ)ASP.Netのバージョンがありますジェネリックハンドラ。

ジェネリックハンドラコード:

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

すべてのブラウザには対応していませんで遊ぶのは非常に簡単ですが、何のサーバ側は必要ありません!以下のコードを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(); 
}); 
関連する問題