Demo - PrintDocument

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.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.input.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.gauge.min.js"></script>
<div class="container">

  <h1>
    PrintDocument
  </h1>
  <p>
    The <b>PrintDocument</b> class makes it easy to create documents 
    for printing or exporting to PDF. Most browsers allow you to select 
    the paper size, orientation, margins, and whether to include page 
    headers and footers.</p>
  <p>
    <button class="btn btn-default" id="btnPrintDoc">Print with PrintDocument</button>
    <button class="btn btn-default" id="btnPrintDirect">Print directly</button>
  </p>    
  <p>
    Here is a table with some radial gauges. The table will be included
    in the <b>PrintDocument</b>.</p>
  <table id="tblGauge">
    <tr>
      <td>
        <div id="theGauge1"></div>
      </td>
      <td>
        <div id="theGauge2"></div>
      </td>
    </tr>
  </table>
  <p>
    And here is a <b>FlexGrid</b> control. Printing it directly would show
    the scrollbars and the part of the content that is visible.
    The <b>PrintDocument</b> class allows us to replace that with a
    printer-friendly version of the grid.</p>
  <div id="theGrid">
  </div>

  <h3>
    Simple Reports</h3>
  <p>
    If you are using a framework that supports templates (most do), 
    you can use the <b>CollectionView</b> and <b>PrintDocument</b>
    classes to generate simple browser-based reports.</p>
  <p>
    See the 
    <a href="https://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/SimpleReports"...

CSS

.wj-flexgrid {
  height: 250px;
}

body {
  margin-bottom: 20pt;
}

JavaScript

onload = function() {

		// render using window.print()
    document.getElementById('btnPrintDirect').addEventListener('click', function(e) {
    	window.print();
    });

		// render using wijmo.PrintDocument class
		document.getElementById('btnPrintDoc').addEventListener('click', function(e) {
    
        // create PrintDocument
        var doc = new wijmo.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 existing elements
        doc.append('<h2>Render Existing Elements</h2>');
        doc.append('<p>Check out these gauges:</p>');
        doc.append(document.getElementById('tblGauge'));

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

        // print the document
        doc.print();
    });
    
    // create some gauges
    var g1 = new wijmo.gauge.RadialGauge('#theGauge1', {
    	value: 20,
      isReadOnly: false
    })
    var g2 = new wijmo.gauge.RadialGauge('#theGauge2', {
    	value: 80,
      isReadOnly: false
    })

		// create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < 100; i++) {
      data.push({
        id: i,
        country:...