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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);