[PDF] Web Worker

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>Web Worker</h1>
  <p>PDFをバックグラウンドで生成します。</p>
  <p>UIスレッドとは別のスレッドでPDF生成処理を実行するため、大きなPDFを生成しても、UIがフリーズすることはありません。また、処理をキャンセルしたり、進捗率を取得することもできます。</p>
  <label for="rowCount">グリッド行数</label>
  <select id="rowCount">
    <option value="10000">10,000</option>
    <option value="100000">100,000</option>
  </select><br>
  <button id="exportGridWorker" class="btn btn-default">PDFを作成（Web Worker使用）</button>&nbsp;
  <button id="exportGrid" class="btn btn-default">PDFを作成（Web Workerなし）</button><br>
  <div id="progressGauge"></div>
  <span id="progressText">0</span>%完了
  <div id="flexGrid"></div>

</div>

CSS

#flexGrid {
  height: 300px;
  margin-top: 20px;
}
#progressGauge {
  width: 400px;
  display: inline-block;
  vertical-align: middle;
}
#progressText {
  width: 30px;
  display: inline-block;
  text-align: right;
}
#exportGridWorker, #exportGrid {
  width: 230px;
}

JavaScript

var rowCount = document.getElementById('rowCount');
var exportGridWorker = document.getElementById('exportGridWorker');
var exportGrid = document.getElementById('exportGrid');
var progressGauge = new wijmo.gauge.LinearGauge('#progressGauge', {
  value: 0
});
var progressText = document.getElementById('progressText');
var isExporting = false;
var exportSettings = {
  embeddedFonts: [
    {
      source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf',
      name: 'ipaexg'
    }
  ],
  styles: {
    cellStyle: {
      font: {
        family: 'ipaexg'
      }
    }
  }
};

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

// Web Workerを作成
var cdn = 'https://demo.grapecity.com/wijmo/beta/controls/';
var script =
  "importScripts('" + cdn + "wijmo.min.js');" +
  "importScripts('" + cdn + "wijmo.pdf.min.js');" +
  "importScripts('" + cdn + "wijmo.grid.pdf.min.js');" +
  "wijmo.grid.pdf.PdfWebWorker.initExportGrid();";
var blob = new Blob([script], { type:'text/javascript' });
var worker;

// Web Workerを使用してPDFを作成
exportGridWorker.addEventListener('click', function() {
  if (!isExporting) {
    // バックグラウンドスレッドで重い処理を実行するため、ボタンを変更すると表示が更新される
    isExporting = true;
    exportGridWorker.innerText = 'キャンセル';
    exportGrid.disabled = true;
    // PDF生成処理を実行
    worker = new Worker(URL.createObjectURL(blob));
    wijmo.grid.pdf.PdfWebWorkerClient.exportGrid(worker, flexGrid, 'FlexGrid.pdf', exportSettings, done, progress);
  } else {
    // PDF生成処理をキャンセル
    worker.terminate();
    progress(0);
    isExporting = false;
    exportGridWorker.innerText = 'PDFを作成（Web Worker使用）';
    exportGrid.disabled = false;
  }
});

// PDF作成完了時に実行されるコールバック関数
function done() {
  isExporting = false;
  exportGridWorker.innerText = 'PDFを作成（Web Worker使用）';
 ...