PrintDocument

The PrintDocument class lets you create and print documents.

You can add content using the PrintDocument.append method and print the document using PrintDocument.print method.

This sample prints the radial gauges and the Grid as a table (spanning multiple pages).

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import * as gauge from '@grapecity/wijmo.gauge'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // render using window.print() document.querySelector('#btnPrintDirect').addEventListener('click', () => { window.print(); }); // // render using wijmo.PrintDocument class document.querySelector('#btnPrintDoc').addEventListener('click', () => { // create PrintDocument let doc = new wijmo.PrintDocument({ title: 'PrintDocument Test' }); // // 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.grapecity.com/wijmo/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.querySelector('#tblGauge')); // // add a printer-friendly version of a FlexGrid to the document let 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>'); let tbl = renderTable(flex); doc.append(tbl); // // print the document doc.print(); }); // // create some gauges let g1 = new gauge.RadialGauge('#theGauge1', { value: 20, isReadOnly: false }); let g2 = new gauge.RadialGauge('#theGauge2', { value: 80, isReadOnly: false }); // // show the data in a grid let theGrid = new grid.FlexGrid('#theGrid', { itemsSource: getData() }); // // custom grid rendering function: renders grid as a table function renderTable(flex) { // start table let tbl = '<table>'; // // headers if (flex.headersVisibility & grid.HeadersVisibility.Column) { tbl += '<thead>'; for (let r = 0; r < flex.columnHeaders.rows.length; r++) { tbl += renderRow(flex.columnHeaders, r); } tbl += '</thead>'; } // // body tbl += '<tbody>'; for (let r = 0; r < flex.rows.length; r++) { tbl += renderRow(flex.cells, r); } tbl += '</tbody>'; // // done tbl += '</table>'; return tbl; } // function renderRow(panel, r) { let tr = '', row = panel.rows[r]; // if (row.renderSize > 0) { tr += '<tr>'; // panel.columns.forEach((col, 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 = wijmo.escapeHtml(content); } // // add cell to row if (panel.cellType == grid.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; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity PrintDocument</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"> <p> <button class="btn btn-default" id="btnPrintDoc">Print with PrintDocument</button> <button class="btn btn-default" id="btnPrintDirect">Print directly</button> </p> <p>Radial gauges:</p> <table id="tblGauge"> <tr> <td> <div id="theGauge1"></div> </td> <td> <div id="theGauge2"></div> </td> </tr> </table> <p>FlexGrid:</p> <div id="theGrid"> </div> </div> </body> </html> export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], 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; } .wj-flexgrid { height: 250px; } .wj-gauge { max-width: 250px; } body { margin-bottom: 20pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; // import { Component, Inject, enableProdMode, ViewChild, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import { WjGaugeModule } from '@grapecity/wijmo.angular2.gauge'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('theGrid') private theGrid: grid.FlexGrid; // data: any; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // // render using wijmo.PrintDocument class printDoc() { // create PrintDocument let doc = new wijmo.PrintDocument({ title: 'PrintDocument Test' }); // // 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.grapecity.com/wijmo/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.querySelector('#tblGauge')); // // add a printer-friendly version of a FlexGrid to the document let flex = wijmo.Control.getControl('#theGrid') as grid.FlexGrid; doc.append('<h2>Printer-Friendly FlexGrid</h2>'); doc.append('<p>And here\'s a FlexGrid rendered as a table:</p>'); let tbl = this._renderTable(this.theGrid); doc.append(tbl); // // print the document doc.print(); } // // render using window.print() printDirect() { window.print(); } // // custom grid rendering function: renders grid as a table private _renderTable(flex: grid.FlexGrid) { // start table let tbl = '<table>'; // // headers if (flex.headersVisibility & grid.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: grid.GridPanel, r: number) { let tr = '', row = panel.rows[r]; // if (row.renderSize > 0) { tr += '<tr>'; // panel.columns.forEach((col: grid.Column, c: number) => { 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 = wijmo.escapeHtml(content); } // // add cell to row if (panel.cellType == grid.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; } } // @NgModule({ imports: [WjGridModule, WjGaugeModule, BrowserModule], declarations: [AppComponent], providers: [DataService], 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 PrintDocument</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"> <p> <button class="btn btn-default" (click)="printDoc()">Print with PrintDocument</button> <button class="btn btn-default" (click)="printDirect()">Print directly</button> </p> <p>Radial gauges:</p> <table id="tblGauge"> <tr> <td> <wj-radial-gauge [value]="20" [isReadOnly]="false"></wj-radial-gauge> </td> <td> <wj-radial-gauge [value]="80" [isReadOnly]="false"></wj-radial-gauge> </td> </tr> </table> <p>FlexGrid:</p> <wj-flex-grid #theGrid [itemsSource]="data"></wj-flex-grid> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], 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; } } .wj-flexgrid { height: 250px; } .wj-gauge { max-width: 250px; } body { margin-bottom: 20pt; } <template> <div class="container-fluid"> <p> <button class="btn btn-default" @click="printDoc">Print with PrintDocument</button> <button class="btn btn-default" @click="printDirect">Print directly</button> </p> <p>Radial gauges:</p> <table id="tblGauge"> <tr> <td> <wj-radial-gauge :value=20 :isReadOnly=false></wj-radial-gauge> </td> <td> <wj-radial-gauge :value=80 :isReadOnly=false></wj-radial-gauge> </td> </tr> </table> <p>FlexGrid:</p> <wj-flex-grid :itemsSource="data" :initialized="initialized"></wj-flex-grid> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import '@grapecity/wijmo.vue2.gauge'; import '@grapecity/wijmo.vue2.grid'; import { getData } from './data'; let App = Vue.extend({ name: "app", data: function() { return { data: getData() }; }, methods: { printDoc: function() { // create PrintDocument let doc = new wijmo.PrintDocument({ title: 'PrintDocument Test' }); // // 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.grapecity.com/wijmo/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.querySelector("#tblGauge")); // // add a printer-friendly version of a FlexGrid to the document doc.append("<h2>Printer-Friendly FlexGrid</h2>"); doc.append("<p>And here's a FlexGrid rendered as a table:</p>"); let tbl = this._renderTable(this.control); doc.append(tbl); // // print the document doc.print(); }, // // render using window.print() printDirect: function() { window.print(); }, // custom grid rendering function: renders grid as a table _renderTable: function(flex) { // start table let tbl = "<table>"; // // headers if (flex.headersVisibility & grid.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; }, _renderRow: function(panel, r) { let tr = "", row = panel.rows[r]; // if (row.renderSize > 0) { tr += "<tr>"; // panel.columns.forEach((col, 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 = wijmo.escapeHtml(content); } // // add cell to row if (panel.cellType == grid.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; }, initialized: function(control) { this.control = control; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .container-fluid .wj-flexgrid { height: 250px; } .container-fluid .wj-gauge { max-width: 250px; } 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>GrapeCity PrintDocument</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() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], 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 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wijmo from '@grapecity/wijmo'; import * as grid from '@grapecity/wijmo.grid'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import * as wjGauge from '@grapecity/wijmo.react.gauge'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.printDoc = () => { // create PrintDocument let doc = new wijmo.PrintDocument({ title: 'PrintDocument Test' }); // // 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.grapecity.com/wijmo/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.querySelector("#tblGauge")); // // add a printer-friendly version of a FlexGrid to the document doc.append("<h2>Printer-Friendly FlexGrid</h2>"); doc.append("<p>And here's a FlexGrid rendered as a table:</p>"); let tbl = this._renderTable(this.state.control); doc.append(tbl); // // print the document doc.print(); }; this.printDirect = () => { window.print(); }; this._renderTable = (flex) => { // start table let tbl = "<table>"; // // headers if (flex.headersVisibility & grid.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; }; this._renderRow = (panel, r) => { let tr = "", row = panel.rows[r]; // if (row.renderSize > 0) { tr += "<tr>"; // panel.columns.forEach((col, 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 = wijmo.escapeHtml(content); } // // add cell to row if (panel.cellType == grid.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; }; this.initialized = (control) => { this.setState({ control: control }); }; this.state = { data: getData(), control: {} }; } render() { return <div className="container-fluid"> <p> <button className="btn btn-default" onClick={this.printDoc}>Print with PrintDocument</button> <button className="btn btn-default" onClick={this.printDirect}>Print directly</button> </p> <p>Radial gauges:</p> <table id="tblGauge"> <tr> <td> <wjGauge.RadialGauge value={20} isReadOnly={false}> </wjGauge.RadialGauge> </td> <td> <wjGauge.RadialGauge value={80} isReadOnly={false}> </wjGauge.RadialGauge> </td> </tr> </table> <p>FlexGrid:</p> <wjGrid.FlexGrid initialized={this.initialized} itemsSource={this.state.data}> </wjGrid.FlexGrid> </div>; } } 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 PrintDocument</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 { height: 250px; } .wj-gauge { max-width: 250px; } body { margin-bottom: 20pt; } export function getData() { let countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'], 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; }