グリッド：印刷

エクスポートオプションにはプリンタもあります。特に、最新のブラウザの多くで、PDFファイル、クラウドストレージなどに出力をリダイレクトできます。

PrintDocumentクラスを使用すると、印刷用のドキュメントを簡単に作成できます。次のサンプルは、PrintDocumentクラスを使用して、FlexGridを印刷に適したtable要素に変換する方法を示しています。

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// PrintDocumentを作成します
var doc = new wjCore.PrintDocument({
    title: 'PrintDocument Test',
    copyCss: false // jsfiddleのクロスオリジンの問題を回避します 
});

// CSSを明示的に追加します（jsfiddleではcopyCssを使用できないため）
doc.append('<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">');
doc.append('<link href="https://cdn.wijmo.com/5.latest/styles/wijmo.min.css" rel="stylesheet">');

// 単純なテキストを追加します
doc.append('<h1>印刷サンプル</h1>');
doc.append('<p>このドキュメントは<b>PrintDocument</b>クラスを使用して作成されました。</p>');

// プリンタフレンドリバージョンのFlexGridをドキュメントに追加します
var flex = wjCore.Control.getControl('#theGrid');
doc.append('<p>ここではFlexGridをHTMLテーブルとして描画します。</p>');
var tbl = renderTable(flex);
doc.append(tbl);

// ドキュメントを印刷します
doc.print();

印刷するには、グリッドをHTMLテーブルにレンダリングする必要があります。このため、グリッドをテーブルに変換するためのカスタム関数がいくつか用意されています。

// グリッドをレンダリングするためのカスタム関数：
// グリッドをテーブルとしてレンダリングします
function renderTable(flex) {
    // テーブルを開始します
    var tbl = '<table>';

    // ヘッダー
    if (flex.headersVisibility & wjGrid.HeadersVisibility.Column) {
        tbl += '<thead>';
        for (var r = 0; r < flex.columnHeaders.rows.length; r++) {
            tbl += renderRow(flex.columnHeaders, r);
        }
        tbl += '</thead>';
    }

    // ボディ
    tbl += '<tbody>';
    for (var r = 0; r < flex.rows.length; r++) {
        tbl += renderRow(flex.cells, r);
    }
    tbl += '</tbody>';

    // 終了
    tbl += '</table>';
    return tbl;
}
function renderRow(panel, r) {
    var tr = '',
    row = panel.rows[r];
    if (row.renderSize > 0) {
        tr += '<tr>';
        for (var c = 0; c < panel.columns.length; c++) {
            var col = panel.columns[c];
            if (col.renderSize > 0) {

                // セルのスタイルとコンテンツを取得します
                var style = 'width:' + col.renderSize + 'px;' +
                    'text-align:' + col.getAlignment() + ';' +
                    'padding-right: 6px';
                var content = panel.getCellData(r, c, true);
                if (!row.isContentHtml && !col.isContentHtml) {
                    content = wijmo.escapeHtml(content);
                }

                // セルを行に追加します
                if (panel.cellType == wjGrid.CellType.ColumnHeader) {
                    tr += '<th style="' + style + '">' + content + '</th>';
                } else {

                    // Boolean値をチェックボックスとして表示します
                    var raw = panel.getCellData(r, c, false);
                    if (raw === true) {
                        content = '&#9745;';
                    } else if (raw === false) {
                        content = '&#9744;';
                    }

                    tr += '<td style="' + style + '">' + content + '</td>';
                }
            }
        }
        tr += '</tr>';
    }
    return tr;
}

グリッド：印刷