[FlexGrid] CSV文字列の取得

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<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>
<div class="container">

  <h1>CSV文字列の取得</h1>
  <p>FlexGrid.getClipStringメソッドに2つの引数が追加されました。第2引数ではCSV形式でセルデータを取得するかどうかを指定できます（falseかundefinedの場合はTSV形式でセルデータを取得します）。第3引数では列ヘッダを含めるかどうかを指定できます。</p>
  <p>このサンプルのexportCsvメソッドのような処理を別途実装することで、CSVファイルを保存することもできます。</p>
  <button id="exportCsv">CSVファイルを保存</button>
  <div id="flexGrid"></div>

</div>

JavaScript

var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
  itemsSource: sample.orders(),
  autoGenerateColumns: false,
  columns: [
    { header: 'No', binding: 'No', width: 80 },
    { header: '商品名', binding: '商品名', width: 200 },
    { header: '受注日', binding: '受注日' },
    { header: '金額', binding: '金額', width: 80, format: 'c' },
    { header: '値引', binding: '値引' }
  ]
});
document.getElementById('exportCsv').addEventListener('click', function() {
  exportCsv(flexGrid, 'FlexGrid.csv');
});
function exportCsv(grid, fileName) {
  var csv = grid.getClipString(new wijmo.grid.CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1), true, true);
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
  var blob = new Blob([bom, csv], { type: 'text/csv' });
  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(blob, fileName);
  } else {
    var e = document.createElement('a');
    e.setAttribute('href', URL.createObjectURL(blob));
    e.setAttribute('download', fileName);
    e.style.display = 'none';
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
  }
}