# Export FlexGrid to Printer

Learn how to export Wijmo's JavaScript DataGrid to print format in this tutorial

## Content

The printer can also be seen as an export option, especially since most modern browsers allow users to redirect the output to PDF files, cloud storage, etc.

The **PrintDocument** class makes it easy to create documents for printing. This sample shows how you can convert a FlexGrid into a **table** element suitable for printing with the **PrintDocument** class.
```javascript
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/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();
```
We need to render the grid into an HTML Table in order to print. So we have a few custom functions for converting the grid to a table. 
```javascript
// 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;
}
```