前回の続き。
「ExcelっぽいHTMLテーブル」をダウンロードできるようにしてみる。
引き続き、こちらの記事のサンプルコードをマネっこして導入してみる。
HTMLのTableをExcelに出力するJavaScript
で、SheetJSっていうところからxlsx.full.min.jsを参照に追加すると。
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.10/xlsx.full.min.js"></script> |
そしたら、XLSXにDOMを解析してExcelに変換できるオブジェクトがロードされるそうな。
参照忘れで機能実装の防止に機能使う前にXLSXオブジェクトのチェックを入れとこ。
ほんで、XLSXオブジェクトと前回観察したsaveAs関数がある時だけボタンできるようにしよう。
|
1 2 3 4 5 6 7 8 |
if (typeof(saveAs) == "function" && typeof(XLSX) == "object") { var $expt_btn = $("<button />").attr("id", "editable_table_export").attr("type", "button") .addClass("export-xlsx").text("to XLSX"); var $inex_div = $("<div />").addClass("in-out-xlsx").append($expt_btn); $('.editable-table').each(function () { $(this).css("margin-top", "34px"); }); $('.editable-table tr th:first').each(function (){ $(this).css("position", "relative").append($inex_div); }); $('button.export-xlsx').click(function () { editable_table.Export_XLSX() }); } |
なんとなくCSSはこんな感じで、（色のセンスがないのはあとで考えよ。）
オプションとして、参照ライブラリがある時だけボタン表示させたいから
参照ライブラリがあったらスクリプトでmargin-topでスペース作っといて
テーブルの一行目の項目からテーブル上にはみ出させる感じでボタンを作ってみる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.editable-table tr th div.in-out-xlsx{ position: absolute; top: -28px; left: 0px; z-index:9900; font-size: 10px; background: greenyellow; -webkit-border-radius:10%; -moz-border-radius:10%; -ms-border-radius:10%; border-radius:10%; } .editable-table tr th div button.export-xlsx{ color: ghostwhite; background: forestgreen; white-space: nowrap; } |
Excel書き出しの部分は参考にさせて頂いた記事からほぼパクリで乗せる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Export_XLSX: function(){ var wopts = { bookType: 'xlsx', bookSST: false, type: 'binary'}; var workbook = {SheetNames: [], Sheets: {}}; var filename = ($("table.editable-table[export_filename]").length)?$("table.editable-table").attr("export_filename"):"html_table.xlsx" $('table.editable-table').each(function () { var n = $(this).attr('data-sheet-name'); n = (n)?n:'Sheet'+(workbook.SheetNames.length+1); workbook.SheetNames.push(n); workbook.Sheets[n] = XLSX.utils.table_to_sheet($(this).get(0), wopts); }); var wbout = XLSX.write(workbook, wopts); var s2ab = function (s) { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) { view[i] = s.charCodeAt(i) & 0xFF; } return buf; } saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), filename); }, |
おっ、おおおぉぉぉ～～～ダウンロードできた。
でも、ファイル開いてみたら今回のソースでむりくり突っ込んだダウンロードボタンとか非表示でブッコンでるセルアドレスとかがデータに入っちゃってるな。
「ExcelっぽいHTMLテーブル」は関数使えるようにする予定だから、ダウンロード前にセルのデータを式に書き換えてセルアドレスとか余分なデータも消してからダウンロードさせて、終わったら表示を戻すみたいな処理が必要そーですね。
んんん、でもセルアドレスとセルデータは別の連想配列でもってるからな。。。
あるテーブルをゴリゴリ書き換えるより別枠に非表示の出力用テーブル生成してダウンロードしたら消す方が建設的かな？
んんん、それはまた次回考えましょ。今日はここまでっつーことで。
