TableExport.jsのボタン配置を変えたかったのでその時のメモです。
TableExportのPropertiesを見てると
テーブルのヘッダかフッタにcaption入れてボタンを追加しているようでした。
画面内で別フォーム作ってその中に「出力」ボタンを入れたいなあって時はヘッダかフッタに出力されちゃうと困まりますが、かといってライブラリに直接手を加えたくはない...
jQueryで頑張ってみます。
基本ソースはこちら。
<head>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
var tables = $("#example").tableExport({
formats: ["xlsx"],
bootstrap: false
});
} );
</script>
</body>
</html>
DataTablesというライブラリを使ってテーブル周りを整形。
TableExportで、xlsxボタンを追加している状態です。
GoogleChromeの開発コンソールでボタンの中身を見てみると
ボタンにfile-blobとclassが追加されているのがわかるかと思います。
file-blobの中身はtableタグの中身をオブジェクトにしたものです。
新しくボタンタグを作ってそこにdata-fileblobをコピーするといけそうかも。
<button data-fileblob="{"data":[["Name","Position","Office","Age","Start date","Salary"],["Name","Position","Office","Age","Start date","Salary"],["Gloria Little","Systems Administrator","New York","59","2009/04/10","$237,500"],["Michael Silva","Marketing Designer","London","66","2012/11/27","$198,500"],["Paul Byrd","Chief Financial Officer (CFO)","New York","64","2010/06/09","$725,000"],["Tiger Nixon","System Architect","Edinburgh","61","2011/04/25","$320,800"]],"fileName":"example","mimeType":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","fileExtension":".xlsx"}" class="button-default xlsx">Export to xlsx</button>
というわけで組み上げたソースがこちら
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.9/xlsx.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/TableExport/3.3.9/js/tableexport.min.js"></script>
</head>
<body>
<button class="" id="excel_button" type="button">Excel</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
var tables = $("#example").tableExport({
formats: ["xlsx"],
bootstrap: false
});
//ボタンのコピー
var datafileblob = $(".xlsx").attr("data-fileblob");
$("#excel_button").attr("data-fileblob", datafileblob);
$("#excel_button").addClass("button-default");
$("#excel_button").addClass("xlsx");
$('table').find('caption').remove();
//ボタンのイベントを作成
$('#excel_button').on('click', function() {
var object = $(this).data("fileblob"),
data = object.data,
fileName = "hogehoge";
mimeType = object.mimeType,
fileExtension = object.fileExtension;
TableExport.prototype.export2file(data, mimeType, fileName, fileExtension);
});
} );
</script>
</body>
</html>
最初に提示したソースと違うところは、bodyタグの直下にbutton(idはexcel_button)を追加したのと、scriptの後半いろいろ足しました。
スクリプトがなにやっているかというと
ボタンのコピーをやってるところでは、
datafileblobでクラスにxlsxがついたDOMを呼び出して、data-fileblobを取得し、変数に突っ込んでいます。
でexcel_buttonにattributeを追加後、元々のボタンに付いていたbutton-defaultやxlsxクラスを追加しています。
で出力ボタンが2つもあるとうっとおしいので、tableのcaptionをremoveしちゃいます。
ボタンのイベント作成をやってるところは、ほとんどTableExportのコピーなのだけれど、
最初についていたボタンは$("button[data-fileblob]")で呼ばれるようになっていた。(TableExport.jsのソース - Github)
excel_buttonにclickイベントを追加して、TableExport.prototype.export2fileに投げればxlsxファイルのダウンロードが可能です。
という感じでした。 おしまい。