自作アプリ(TaskBorderTaskBorder)で、HTML上のtableをCSV出力したかったので、色々調べたことをメモ
やりたかったこと
tableタグの内容をCSV出力したかった。
実際にやったこと
jQuery pluginの「table2csv」を使ってみた。
下記な感じで意外と簡単に使えたので、メモメモ
①htmlファイル内でtable2csv.jsの読み込み
<!-- jQueryの読み込み --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- table2csvの読み込み --> <script src="src/table2csv.js"></script>
②tableの準備
<div> <table id="table"> <thead id="head"> <tr><th>title</th></tr> </thead> <tbody id="body"> <td>value</td> </tbody> </table> <button type="button" id="downloadCsvBtn"> CSV download </button> </div>
③buttonのclickイベント内にCSV出力処理を追加
$('#downloadHisCsvBtn').click(function () { // CSV形式に整形 $("#table").table2csv('output', { appendTo: '#out' }); // ファイル名の定義(table.csv) $("#table").table2csv('output', { filename: 'table.csv' }); // CSV出力 $("#table").table2csv(); })