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

前回の続きです。
とりあえずダウンロードボタン仕込んだけど、余計な情報がセルに入ってたのでデータを整理してダウンロードできるようにしました。

更新内容は「ExcelっぽいHTMLテーブル」のページに反映してます。

ダウンロードボタンがダウンロードされちゃって邪魔くさいので一旦消して、

セルの内容を変換・セルアドレスを振る前の状態に戻します。

で、ダウンロードの処理が終わったら「editable_table.Initalize();」を呼び出して

もっかいセルアドレスの付与とダウンロードボタンを生成する。

  Export_XLSX: function(){
    // 式に戻してExport ⇒ セルの再計算をする。
    $('.in-out-xlsx').remove();
    for (adrs in editable_table_val) {
      $("td[data-address='" + adrs + "']").empty().text(editable_table_val[adrs].value);
    }

    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);
    editable_table.AddressSetting();
    editable_table.Recalculation();
    editable_table.OptionSheetJS();
  },

Export_XLSX: function(){

// 式に戻してExport ⇒ セルの再計算をする。

$('.in-out-xlsx').remove();

for (adrs in editable_table_val) {

$("td[data-address='" + adrs + "']").empty().text(editable_table_val[adrs].value);

}

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);

editable_table.AddressSetting();

editable_table.Recalculation();

editable_table.OptionSheetJS();

editable_table.Initalize()を再利用してセル情報を復元しようと思ったけど

click、dblclickイベントが重複登録されてしまうようになってしまった。

セルの情報を定義する部分だけeditable_table.Initalize()から抜き出して再利用できる様にする。

抜き出して再定義したfunctionはこの二つ。

  AddressSetting: function () {
    $('.editable-table').find('td').each(function(){
      var $td = $(this);
      var tr = $(this).parent();
      var row = $('.editable-table').find('tr').index(tr);
      var col = $(tr).find('td').index(this);
      var adrs = editable_table.BuildAddress(row, col);
      $td.attr("data-address", adrs).css("position", "relative");
      editable_table_val[adrs] = { value: $td.html(), row: row, col: col };
      var $span = $("<span />").addClass("cell-address").text(adrs).hide();
      $td.html("").append($span).append($("<div />"));
    });
  },

AddressSetting: function () {

$('.editable-table').find('td').each(function(){

var $td = $(this);

var tr = $(this).parent();

var row = $('.editable-table').find('tr').index(tr);

var col = $(tr).find('td').index(this);

var adrs = editable_table.BuildAddress(row, col);

$td.attr("data-address", adrs).css("position", "relative");

editable_table_val[adrs] = { value: $td.html(), row: row, col: col };

var $span = $("<span />").addClass("cell-address").text(adrs).hide();

$td.html("").append($span).append($("<div />"));

});

  OptionSheetJS: function() {
    // FileSaver.min.js , xlsx.full.min.js 依存の機能
    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() });
    }
  },

OptionSheetJS: function() {

// FileSaver.min.js , xlsx.full.min.js 依存の機能

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() });

}

うん。これでキレイにデータダウンロードできるようになりましたっ。

次は、xlsxファイルからテーブルに再現する方の処理も組み込んでみよっかなー。

タグ: SheetJS

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

コメントを残す コメントをキャンセル

Related Post

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

セルの値計算・・・と思ったけど脱線してエラー表示セルの値計算・・・と思ったけど脱線してエラー表示

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

コメントを残すコメントをキャンセル