Printer

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.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjCore from '@grapecity/wijmo'; import * as wjGrid from '@grapecity/wijmo.grid'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // render using wijmo.PrintDocument class document.getElementById('btnPrintDoc').addEventListener('click', function (e) { // // 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="http://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(); }); // // 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: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } // // show the data in a grid var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: data, }); // // 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 = wjCore.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; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Print</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <button class="btn btn-default" id="btnPrintDoc"> Print with PrintDocument </button> <div id="theGrid"></div> </div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; constructor() { this.data = this._getData(); } @ViewChild('flex') flex: wjcGrid.FlexGrid; printDoc() { // create PrintDocument let doc = new wjcCore.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="http://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 doc.append('<p>Here\'s a FlexGrid rendered as a table:</p>'); let tbl = this._renderTable(this.flex); doc.append(tbl); // print the document doc.print(); } // renders grid as a table private _renderTable(flex: wjcGrid.FlexGrid) { // start table let tbl = '<table>'; // headers if (flex.headersVisibility & wjcGrid.HeadersVisibility.Column) { tbl += '<thead>'; for (let r = 0; r < flex.columnHeaders.rows.length; r++) { tbl += this._renderRow(flex.columnHeaders, r); } tbl += '</thead>'; } // body tbl += '<tbody>'; for (let r = 0; r < flex.rows.length; r++) { tbl += this._renderRow(flex.cells, r); } tbl += '</tbody>'; // done tbl += '</table>'; return tbl; } private _renderRow(panel: wjcGrid.GridPanel, r: number) { let tr = '', row = panel.rows[r]; if (row.renderSize > 0) { tr += '<tr>'; for (let c = 0; c < panel.columns.length; c++) { let col = panel.columns[c]; if (col.renderSize > 0) { // get cell style, content let style = 'width:' + col.renderSize + 'px;' + 'text-align:' + col.getAlignment() + ';' + 'padding-right: 6px'; let content = panel.getCellData(r, c, true); if (!row.isContentHtml && !col.isContentHtml) { content = wjcCore.escapeHtml(content); } // add cell to row if (panel.cellType == wjcGrid.CellType.ColumnHeader) { tr += '<th style="' + style + '">' + content + '</th>'; } else { // show boolean values as checkboxes let 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; } private _getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 100; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Print</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <button class="btn btn-default" (click)="printDoc()"> Print with PrintDocument </button> <!-- the grid --> <wj-flex-grid #flex [(itemsSource)]="data"> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20pt; } <template> <div class="container-fluid"> <button class="btn btn-default" @click="printDoc()">Print with PrintDocument</button> <!-- the grid --> <wj-flex-grid :itemsSource="data" :initialized="initialized"></wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import { getData } from "./data"; import { WjGridModule } from "@grapecity/wijmo.vue2.grid"; import * as wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.grid"; new Vue({ el: "#app", data: { data: getData() }, methods: { initialized: function(flex) { this.flex = flex; }, printDoc: function() { // create PrintDocument let doc = new wjcCore.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="http://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 doc.append("<p>Here's a FlexGrid rendered as a table:</p>"); let tbl = this.renderTable(this.flex); doc.append(tbl); // print the document doc.print(); }, // renders grid as a table renderTable: function() { // start table let tbl = "<table>"; // headers if (this.flex.headersVisibility & wjcGrid.HeadersVisibility.Column) { tbl += "<thead>"; for (let r = 0; r < this.flex.columnHeaders.rows.length; r++) { tbl += this.renderRow(this.flex.columnHeaders, r); } tbl += "</thead>"; } // body tbl += "<tbody>"; for (let r = 0; r < this.flex.rows.length; r++) { tbl += this.renderRow(this.flex.cells, r); } tbl += "</tbody>"; // done tbl += "</table>"; return tbl; }, renderRow: function(panel, r) { let tr = "", row = panel.rows[r]; if (row.renderSize > 0) { tr += "<tr>"; for (let c = 0; c < panel.columns.length; c++) { let col = panel.columns[c]; if (col.renderSize > 0) { // get cell style, content let style = "width:" + col.renderSize + "px;" + "text-align:" + col.getAlignment() + ";" + "padding-right: 6px"; let content = panel.getCellData(r, c, true); if (!row.isContentHtml && !col.isContentHtml) { content = wjcCore.escapeHtml(content); } // add cell to row if (panel.cellType == wjcGrid.CellType.ColumnHeader) { tr += '<th style="' + style + '">' + content + "</th>"; } else { // show boolean values as checkboxes let 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; } } }); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Using a custom font</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 100; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.react.grid"; import * as wjGrid from "@grapecity/wijmo.grid"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <button className="btn btn-default" onClick={this.printDoc.bind(this)}>Print with PrintDocument</button> <wjcGrid.FlexGrid itemsSource={this.state.data} initialized={this.initialized.bind(this)}></wjcGrid.FlexGrid> </div>; } initialized(flex) { this.flex = flex; } printDoc() { // create PrintDocument let doc = new wjcCore.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="http://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 doc.append("<p>Here's a FlexGrid rendered as a table:</p>"); let tbl = this.renderTable(); doc.append(tbl); // print the document doc.print(); } // renders grid as a table renderTable() { // start table let tbl = "<table>"; // headers if (this.flex.headersVisibility & wjGrid.HeadersVisibility.Column) { tbl += "<thead>"; for (let r = 0; r < this.flex.columnHeaders.rows.length; r++) { tbl += this.renderRow(this.flex.columnHeaders, r); } tbl += "</thead>"; } // body tbl += "<tbody>"; for (let r = 0; r < this.flex.rows.length; r++) { tbl += this.renderRow(this.flex.cells, r); } tbl += "</tbody>"; // done tbl += "</table>"; return tbl; } renderRow(panel, r) { let tr = "", row = panel.rows[r]; if (row.renderSize > 0) { tr += "<tr>"; for (let c = 0; c < panel.columns.length; c++) { let col = panel.columns[c]; if (col.renderSize > 0) { // get cell style, content let style = "width:" + col.renderSize + "px;" + "text-align:" + col.getAlignment() + ";" + "padding-right: 6px"; let content = panel.getCellData(r, c, true); if (!row.isContentHtml && !col.isContentHtml) { content = wjcCore.escapeHtml(content); } // add cell to row if (panel.cellType == wjGrid.CellType.ColumnHeader) { tr += '<th style="' + style + '">' + content + "</th>"; } else { // show boolean values as checkboxes let 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; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Grapecity Wijmo OLAP Pivot Chart Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20pt; } export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (let i = 0; i < 100; i++) { data.push({ id: i, country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 20000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }