Excel

by Rambabu Pudi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<link rel="stylesheet" href="https://demo.grapecity.com/wijmo/sample/styles/sample.css">
<div class="container">

  <h1>Excel</h1>
  <p>Excel。クライアント側のJavaScript処理だけで、Excelファイルを新規作成、または読み込んで更新します。FlexGridのExcel入出力にも対応します。</p>
  <form name="form" class="form-inline">
    <button name="saveExcel" type="button" class="btn btn-default">Excelファイルを作成</button>
    <button name="saveGrid" type="button" class="btn btn-default">FlexGridを保存</button><br>
    <input name="file" type="file" class="form-control" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12" />
    <button name="loadGrid" type="button" class="btn btn-default">FlexGridに読み込み</button>
  </form>
  <div id="flexGrid"></div>

</div>

CSS

#flexGrid {
  height: 300px;
  margin-top: 20px;
}

JavaScript

document.form.saveExcel.addEventListener('click', function (e) {
  var sheet = new wijmo.xlsx.WorkSheet();

  var font = new wijmo.xlsx.WorkbookFont();
  font.color = 'red';

  var style = new wijmo.xlsx.WorkbookStyle();
  style.font = font;

  var rows = sheet.rows;
  rows[0] = new wijmo.xlsx.WorkbookRow();
  rows[0].cells[0] = new wijmo.xlsx.WorkbookCell();
  rows[0].cells[0].value = 'Wijmo';
  rows[0].cells[0].style = style;

  var book = new wijmo.xlsx.Workbook();
  book.sheets.push(sheet);
  book.save('Wijmo.xlsx');
});
document.form.saveGrid.addEventListener('click', function (e) {
  wijmo.grid.xlsx.FlexGridXlsxConverter.save(flexGrid, { includeCellStyles: false }, 'FlexGrid.xlsx');
});
document.form.loadGrid.addEventListener('click', function (e) {
  wijmo.grid.xlsx.FlexGridXlsxConverter.load(flexGrid, document.form.file.files[0]);
});

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(100)
});
flexGrid.columns[1].width = 200;