FlexGrid를 프린터로 내보내기

대부분의 최신 브라우저에서는 사용자가 출력을 PDF 파일, 클라우드 저장소 등으로 리디렉션할 수 있기 때문에 프린터도 내보내기 옵션으로 볼 수 있습니다.

PrintDocument 클래스를 사용하면 인쇄할 문서를 간편하게 만들 수 있습니다. 이 샘플은 PrintDocument 클래스를 사용하여 FlexGrid를 인쇄에 적합한 표 요소로 변환하는 방법을 보여줍니다.

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

// create PrintDocument
var doc = new wjCore.PrintDocument({
    title: 'PrintDocument Test',
    copyCss: false // prevent cross-origin issues in jsfiddle 
});

// add CSS explicitly (since we can't use copyCss in jsfiddle)
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">');

        // add some simple text
doc.append('<h1>Printing Example</h1>');
doc.append('<p>This document was created using the <b>PrintDocument</b> class.</p>');

// add a printer-friendly version of a FlexGrid to the document
var flex = wjCore.Control.getControl('#theGrid');
doc.append('<p>Here\'s a FlexGrid rendered as a table:</p>');
var tbl = renderTable(flex);
doc.append(tbl);

// print the document
doc.print();

인쇄하려면 그리드를 HTML Table로 렌더링해야 합니다. 그래서 그리드를 표로 변환하기 위한 몇 가지 사용자 정의 함수가 있습니다.

// custom grid rendering function: 
// renders grid as a table
function renderTable(flex) {
    // start table
    var tbl = '<table>';

    // headers
    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>';
    }

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

    // done
    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) {

                // get cell style, content
                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);
                }

                // add cell to row
                if (panel.cellType == wjGrid.CellType.ColumnHeader) {
                    tr += '<th style="' + style + '">' + content + '</th>';
                } else {

                    // show boolean values as checkboxes
                    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;
}