わんすけに聞いてみる EXCELっぽいHTMLテーブル テーブルのダウンロード(SheetJS – xlsx.full.min.js)

テーブルのダウンロード(SheetJS – xlsx.full.min.js)

前回の続き。
「ExcelっぽいHTMLテーブル」をダウンロードできるようにしてみる。

引き続き、こちらの記事のサンプルコードをマネっこして導入してみる。
HTMLのTableをExcelに出力するJavaScript

で、SheetJSっていうところからxlsx.full.min.jsを参照に追加すると。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.9.10/xlsx.full.min.js"></script>

そしたら、XLSXにDOMを解析してExcelに変換できるオブジェクトがロードされるそうな。

参照忘れで機能実装の防止に機能使う前にXLSXオブジェクトのチェックを入れとこ。

ほんで、XLSXオブジェクトと前回観察したsaveAs関数がある時だけボタンできるようにしよう。

    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でスペース作っといて

テーブルの一行目の項目からテーブル上にはみ出させる感じでボタンを作ってみる。

.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書き出しの部分は参考にさせて頂いた記事からほぼパクリで乗せる。

  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テーブル」は関数使えるようにする予定だから、ダウンロード前にセルのデータを式に書き換えてセルアドレスとか余分なデータも消してからダウンロードさせて、終わったら表示を戻すみたいな処理が必要そーですね。

んんん、でもセルアドレスとセルデータは別の連想配列でもってるからな。。。

あるテーブルをゴリゴリ書き換えるより別枠に非表示の出力用テーブル生成してダウンロードしたら消す方が建設的かな?

んんん、それはまた次回考えましょ。今日はここまでっつーことで。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Related Post

セル情報を整理してキレイにダウンロードできるようにする。(xlsx.full.min.js)セル情報を整理してキレイにダウンロードできるようにする。(xlsx.full.min.js)

前回の続きです。 とりあえずダウンロードボタン仕込んだけど、余計な情報がセルに入ってたのでデータを整理してダウンロードできるようにしました。 更新内容は「ExcelっぽいHTMLテーブル」のページに反映してます。 &nb […]

編集したTableの値に循環参照が発生していないかチェックしてみる。編集したTableの値に循環参照が発生していないかチェックしてみる。

さて、今回は編集可能にしたTableに関数を実装していく前に循環参照を検出しようというところ。 編集中のセルからフォーカスアウトした時に発火するイベントにチェックを仕込みます。 循環参照のチェックを開始する部分 $("# […]