Wijmo Excel 大量データ

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/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.xlsx.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container-fluid">
  <p>10万行のグリッドをExcelファイルに出力します。</p>
  <button id="save" class="btn btn-default">Excel出力</button>
  <div id="progressGauge"></div>
  <span id="progressText">0</span>%完了
  <div id="flexGrid"></div>
</div>

CSS

body {
  margin: 50px 0;
}
#flexGrid {
  height: 300px;
}
#progressGauge {
  width: 400px;
  display: inline-block;
  vertical-align: middle;
}
#progressText {
  width: 30px;
  display: inline-block;
  text-align: right;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
    itemsSource: getData(100000),
    columns: [
      { binding: 'No', width: 80 },
      { binding: '商品名', width: 200 },
      { binding: '受注日', width: 120 },
      { binding: '金額', format: 'c', width: 100 },
      { binding: '値引', width: 80 }
    ]
  });
  var progressGauge = new wijmo.gauge.LinearGauge('#progressGauge', {
    value: 0
  });
  var isExporting = false;
  var saveButton = document.getElementById('save');
  saveButton.addEventListener('click', function () {
    if (!isExporting) {
      isExporting = true;
      saveButton.innerText = 'キャンセル';
      flexGrid.isDisabled = true;
      wijmo.grid.xlsx.FlexGridXlsxConverter.saveAsync(flexGrid, { includeCellStyles: false }, 'FlexGrid.xlsx', finished, null, setProgress);
    } else {
      wijmo.grid.xlsx.FlexGridXlsxConverter.cancelAsync(finished);
      setProgress(0);
      saveButton.innerText = 'Excel出力';
      flexGrid.isDisabled = false;
      isExporting = false;
    }
  });
  function finished() {
    setProgress(0);
    saveButton.innerText = 'Excel出力';
    flexGrid.isDisabled = false;
    isExporting = false;
  }
  function setProgress(value) {
    document.getElementById('progressText').innerText = value;
    progressGauge.value = value;
  }
}

var productNames = ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター', 'コーヒーミルク', 'ピリピリビール', 'オタル白ラベル', 'バードワイン'];
function random(max, min) {
  if (!min) min = 0;
  return Math.floor(Math.random() * (max - min)) + min;
}
function randomDate() {
  let date = new Date((new Date()).getFullYear() - 5, 3, 1);
  return wijmo.DateTime.addDays(date, random(365 * 5));
}
function getData(length) {
  let data = [];
  for (let i = 0; i < length; i++) {
    data.push({
      No: i,
      商品名: productNames[random(productNames.length)],
      受注日: randomDate(),
      金額: random(99, 1) * 100,
     ...