SpreadJS 9J クライアントサイドExcelIOサンプル

by spradjs samples

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/spreadjs/9201610/css/gc.spread.sheets.excel2013white.9.20161.0.css">
<script src="https://cdn.grapecity.com/spreadjs/9201610/scripts/gc.spread.sheets.all.9.20161.0.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/9201610/scripts/interop/gc.spread.excelio.9.20161.0.min.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script src="https://cdn.grapecity.com/spreadjs/9201610/scripts/resources/ja/gc.spread.sheets.resources.ja.9.20161.0.min.js"></script>
<!-- SpreadJS Markup -->
<div id="ss" style="width: 600px; height: 300px; border: 1px solid gray;"></div>
<div class="functions">
  <input style="width:354px;" type="file" name="files[]" multiple id="fileDemo" accept=".xlsx,.xls" />
  <input class="buttons" type="button" id="loadExcel" value="インポート" onclick="OnImportButtonClicked();">
</div>
<div class="functions">
  <input style="width:350px;" type="text" id="exportFileName" placeholder="Export file name" value="export.xlsx" />
  <input class="buttons" type="button" id="saveExcel" value="エクスポート" onclick="OnExportButtonClicked();" />
</div>

CSS

* {
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}

div.functions {
  width: 590px;
  border: gray solid 1px;
  margin: 5px 0px 5px 0px;
  padding: 5px 5px 5px 5px;
}

input.buttons {
  width: 110px;
}

JavaScript

window.onload = function() {
  //初期化
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  var sheet = spread.getActiveSheet();

  // 行列サイズの設定
  var ROW_HEIGHT = 30;
  var COLUMN_WIDTH = 150;
  sheet.defaults.rowHeight = ROW_HEIGHT;
  sheet.defaults.colWidth = COLUMN_WIDTH;

  // 行数の設定
  var ROW_NUM = 20;
  sheet.setRowCount(ROW_NUM);

  // シートのスタイル設定
  var basicFont = "normal normal 12px Meiryo";
  var defaultStyle = sheet.getDefaultStyle();
  defaultStyle.font = basicFont;
  defaultStyle.themeFont = basicFont;
  defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
  defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
  sheet.setDefaultStyle(defaultStyle);

  sheet.suspendPaint();

  // 各セルに試験用のダミーデータを設定します
  var i;
  var j;
  var rowCount = sheet.getRowCount();
  var colCount = sheet.getColumnCount();
  for (i = 0; i < rowCount; i = i + 1) {
    for (j = 0; j < colCount; j = j + 1) {
      var value = (i + 1) * (j + 1);
      sheet.getCell(i, j).text("テスト" + value.toString());
    }
  }
  // 注：エクスポートするファイルに行列のサイズを反映する場合は
  // 個別に行列のサイズを設定します
  for (i = 0; i < rowCount; i = i + 1) {
    sheet.setRowHeight(i, ROW_HEIGHT);
  }
  for (j = 0; j < colCount; j = j + 1) {
    sheet.setColumnWidth(j, COLUMN_WIDTH);
  }

  // スクロールバーの設定
  spread.options.showVerticalScrollbar = false;
  spread.options.showHorizontalScrollbar = false;

  // タブの設定
  spread.options.tabStripVisible = false;

  sheet.resumePaint();
}

//インポートボタン押下時の処理
function OnImportButtonClicked() {
  //シートの取得
  var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
  var sheet = spread.getActiveSheet();

  //ExcelIOインスタンスの生成
  var excelIo = new GC.Spread.Excel.IO();

  //ファイルの取得
  var excelFile = document.getElementById("fileDemo").files[0];

  // エクセルファイルインポート処理
  excelIo.open(excelFile, function(json) {
    // ファイルオープン成功時の処理
    var spreadObj = JSON.parse(json);
    spread.fromJSON(spreadObj);
  }, function(e) {
    // ファイルオープン失敗時の処理
   ...