web-dev-qa-db-ja.com

jQueryでCSVにエクスポートする

私は次のようなdivを動的に生成しています：

<div id='PrintDiv'>
        <table id="mainTable">
            <tr>
                <td>
                    Col1
                </td>
                <td>
                    Col2
                </td>
                <td>
                    Col3
                </td>
            </tr>
            <tr>
                <td>
                    Val1
                </td>
                <td>
                    Val2
                </td>
                <td>
                    Val3
                </td>
            </tr>
            <tr>
                <td>
                    Val11
                </td>
                <td>
                    Val22
                </td>
                <td>
                    Val33
                </td>
            </tr>
            <tr>
                <td>
                    Val111
                </td>
                <td>
                    Val222
                </td>
                <td>
                    Val333
                </td>
            </tr>
        </table>
    </div>

また、ページにはさらに多くの要素があります。さて、このようなcsvファイルを取得するにはどうすればよいですか：

Col1,Col2,Col3
Val1,Val2,Val3
Val11,Val22,Val33
Val111,Val222,Val333

jQueryを使用しますか？

このようなファイル保存ダイアログボックスも必要です：

alt text

ありがとう。

javascriptasp.netjquerycsv
45
Pratik

これは私の実装です（ベース： https://Gist.github.com/3782074 ）：

使用法：HTML：

<table class="download">...</table>
<a href="" download="name.csv">DOWNLOAD CSV</a>

JS：

$("a[download]").click(function(){
    $("table.download").toCSV(this);    
});

コード：

jQuery.fn.toCSV = function(link) {
  var $link = $(link);
  var data = $(this).first(); //Only one table
  var csvData = [];
  var tmpArr = [];
  var tmpStr = '';
  data.find("tr").each(function() {
      if($(this).find("th").length) {
          $(this).find("th").each(function() {
            tmpStr = $(this).text().replace(/"/g, '""');
            tmpArr.Push('"' + tmpStr + '"');
          });
          csvData.Push(tmpArr);
      } else {
          tmpArr = [];
             $(this).find("td").each(function() {
                  if($(this).text().match(/^-{0,1}\d*\.{0,1}\d+$/)) {
                      tmpArr.Push(parseFloat($(this).text()));
                  } else {
                      tmpStr = $(this).text().replace(/"/g, '""');
                      tmpArr.Push('"' + tmpStr + '"');
                  }
             });
          csvData.Push(tmpArr.join(','));
      }
  });
  var output = csvData.join('\n');
  var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(output);
  $link.attr("href", uri);
}

注：

  • 見出しに「th」タグを使用します。存在しない場合、追加されません。
  • このコードは、次の形式の数値を検出します。

[〜＃〜] update [〜＃〜]：

以前の実装は正常に機能しましたが、csvファイル名を設定しませんでした。コードはファイル名を使用するように変更されましたが、<a>要素が必要です。 <a>要素を動的に生成して「クリック」イベントを発生させることはできないようです（おそらくセキュリティ上の理由ですか？）。

[〜＃〜] demo [〜＃〜]

http://jsfiddle.net/nLj74t0f/

（残念ながら、jsfiddleはファイルの生成に失敗し、代わりにエラーをスローします： 'POST request'を使用してください。そのエラーにより、アプリケーションでこのコードをテストできなくなることはありません）。

25
lepe

このためのフリーソフトウェアライブラリを最近投稿しました： "html5csv.js"-GitHub

これは、csvファイルのインポートまたはエクスポート、データの操作、表示、編集、フィッティングなどのさまざまな数学的手順の実行を必要とする可能性があるJavascriptでの小さなシミュレータアプリの作成を効率化することを目的としています。

「html5csv.js」を読み込んだ後、テーブルをスキャンしてCSVを作成する問題は1行です。

_CSV.begin('#PrintDiv').download('MyData.csv').go();
_

このコードを使用した例のJSFiddleデモ です。

内部的には、Firefox/Chromeの場合、これはデータURL指向のソリューションであり、@ italo、@ lepe、および@adeneo（別の質問）によって提案されたものに似ています。 IEの場合

CSV.begin()呼び出しは、データを内部配列に読み込むようにシステムをセットアップします。その後、そのフェッチが発生します。次に、.download()はデータURLリンクを内部的に生成し、リンククリッカーでそれをクリックします。これにより、ファイルがエンドユーザーにプッシュされます。

caniuse IE10は_<a download=...>_をサポートしていません。だからIE私のライブラリはnavigator.msSaveBlob()を内部的に呼び出します @ Manu Sharmaによって提案された

6
Paul

以下は、クライアントからのみダウンロードをトリガーする問題に対する2つの[〜＃〜]回避策[〜＃〜]です。後のブラウザでは、「blob」を見る必要があります

1。テーブルをドラッグアンドドロップします

テーブルをドラッグしてエクセルにすることができることをご存知ですか？

切り取って貼り付けるかドラッグするテーブルを選択する方法は次のとおりです

JavaScriptを使用して完全なテーブルを選択します（クリップボードにコピーする）

2。 divからポップアップページを作成します

保存ダイアログを生成しませんが、resultingポップアップが拡張子。csvで保存すると、Excelで正しく処理されます。

文字列は
w.document.write("row1.1\trow1.2\trow1.3\nrow2.1\trow2.2\trow2.3");
例えば。行の改行でタブ区切りされます。

http://plugins.jquery.com/project/table2csv などの文字列を作成するプラグインがあります

var w = window.open('','csvWindow'); // popup, may be blocked though
// the following line does not actually do anything interesting with the 
// parameter given in current browsers, but really should have. 
// Maybe in some browser it will. It does not hurt anyway to give the mime type
w.document.open("text/csv");
w.document.write(csvstring); // the csv string from for example a jquery plugin
w.document.close();

[〜＃〜]免責事項[〜＃〜]：これらは回避策であり、現在ほとんどのブラウザに答えがある質問には完全には答えていません。クライアントのみでは不可能

5
mplungjan

JQueryのみを使用すると、サーバー呼び出しを回避できません。

ただし、この結果を達成するために、 Downloadify を使用しています。これにより、別のサーバー呼び出しを行わずにファイルを保存できます。これにより、サーバーの負荷が軽減され、ユーザーエクスペリエンスが向上します。

適切なCSVを取得するには、不要なタグをすべて削除し、データ間に「、」を挿入するだけです。

4
DKSan

ここではサーバー呼び出しを避けることはできません。JavaScriptは（セキュリティ上の理由から）ユーザーのファイルシステムにファイルを保存することはできません。サーバーにデータを送信し、itに.csvリンクまたは添付ファイルとして直接。

HTML5にはsomeの機能があります （実際には保存は指定されていません-ユースケースだけで、read必要に応じてファイルを参照してください）が、現在のところクロスブラウザソリューションはありません。

1
Nick Craver

次のコーディングを試してください... HTMLテーブルの値を使用してCSVを生成するのは非常に簡単です。ブラウザの問題は発生しません

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>        
        <script src="http://www.csvscript.com/dev/html5csv.js"></script>
<script>
$(document).ready(function() {

 $('table').each(function() {
    var $table = $(this);

    var $button = $("<button type='button'>");
    $button.text("Export to CSV");
    $button.insertAfter($table);

    $button.click(function() {     
         CSV.begin('table').download('Export.csv').go();
    });
  });  
})

</script>
    </head>
<body>
<div id='PrintDiv'>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>
</div>
</body>
</html>
0
ManiMaran A