[PDF] パフォーマンス改善

by Wijmo5_jp

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.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.pdf.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.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>パフォーマンス改善</h1>
  <p>PDF生成処理のパフォーマンスが改善されました。（参考：<a href="https://jsfiddle.net/e1mdafvn/embedded/result,js,html/" target="_blank">旧バージョンのパフォーマンス</a>）</p>
  <label for="rowCount">グリッド行数</label>
  <select id="rowCount">
    <option value="100">100</option>
    <option value="1000">1,000</option>
    <option value="5000">5,000</option>
    <option value="10000">10,000</option>
  </select><br>
  <button id="exportGrid" class="btn btn-default">PDFに出力</button>
  <input id="time">（ms）
  <div id="flexGrid"></div>

</div>

CSS

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

JavaScript

var rowCount = document.getElementById('rowCount');

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(rowCount.value)
});
flexGrid.columns[1].width = 200;
rowCount.addEventListener('change', function() {
  flexGrid.collectionView.sourceCollection = sample.orders(rowCount.value);
});

document.getElementById('exportGrid').addEventListener('click', function() {
  var now = Date.now();
  var doc = new wijmo.pdf.PdfDocument({
    ended: function(sender, args) {
      wijmo.pdf.saveBlob(args.blob, 'FlexGrid.pdf');
      document.getElementById('time').value = Date.now() - now;
    }
  });
  wijmo.grid.pdf.FlexGridPdfConverter.draw(flexGrid, doc, null, null, {
    embeddedFonts: [ { source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' } ],
    styles: {
      cellStyle: {
        font: { family: 'ipaexg' }
      }
    }
  });
  doc.end();
});