2016-05-01 4 views
0

私は、htmlテーブルをテキストファイルにエクスポートする必要があるプロジェクトで作業しています。下記のHTMLコードの簡易版である:期待される結果が(うまく整列列を持つ)テキストファイルに次のようになりますanglejsを使用してhtmlテーブルをテキストファイルにエクスポート

<table> 
    <thead> 
     <tr> 
      <th>Code</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Age</th> 
      <th>Date1</th> 
      <th>Date2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="employee in employees"> 
      <td>{{employee.code}}</td> 
      <td>{{employee.firstName}}</td> 
      <td>{{employee.lastName}}</td> 
      <td>{{employee.age}}</td> 
      <td><input type="text" class="datepicker" ng-model="employee.date1" datepicker /></td> 
      <td><input type="text" class="datepicker" ng-model="employee.date2" datepicker/></td> 
     </tr> 
    </tbody> 
</table> 

Code firstName lastName Age  Date1   Date2 
001  x   y  25  2016/01/01  2016/04/04 
... 

を私がして、「古典的」な方法を試してみましたjqueryしかし、それは私のTDの中の値を解釈しません。ですから、このような問題を克服するための角度のある指示などを探しています。 おかげ..

+0

何が問題でしたか? –

+0

ここで{{}}の中にデータをエクスポートしようとすると問題が発生します:![印刷画面](http://i.imgur.com/qrkwaKE.png) – Daniel

答えて

0

それはあなたの表は、このようなものであると仮定すると、FileSaver.js

を使用されるだろう行うにはかなりまっすぐ進む道は、このテーブルが生成された後

<table id="demo-table"> 
    <thead> 
     <tr> 
      <th>Code</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Age</th> 
      <th>Date1</th> 
      <th>Date2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="employee in employees"> 
      <td>{{employee.code}}</td> 
      <td>{{employee.firstName}}</td> 
      <td>{{employee.lastName}}</td> 
      <td>{{employee.age}}</td> 
      <td><input type="text" class="datepicker" ng-model="employee.date1" datepicker /></td> 
      <td><input type="text" class="datepicker" ng-model="employee.date2" datepicker/></td> 
     </tr> 
    </tbody> 
</table> 

、単にコードを呼び出します以下、

var ele = document.getElementById('demo-table'); 
var blob = new Blob([ele.innerText], { 
     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
    }); 
    saveAs(blob, "demo-table.csv"); 
}; 

その他の設定については、FileSaver.jsのドキュメントを参照してください。

これがあなたの問題を解決するはずです。

+0

印刷:http://i.imgur.com /qrkwaKE.png – Daniel

+0

@Daniel innerHTMLをinnerTextに置き換えるだけで、テーブルが生成されていることを確認する必要があります。つまり、このコードを 'setTimeout'で呼び出すことができます。サンプルコードをjsFiddleに投稿できますか? –

+0

ありがとう..今は動作しますが、Date1とDate2の列はtdの中に入力フィールドがあるので正常です。この問題を解決するためのアイデアはありますか? – Daniel

関連する問題