PrintDocument (Vue)

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).

This example uses Vue.

<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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@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', "@grapecity/wijmo.vue2.chart.analytics": "npm:@grapecity/wijmo.vue2.chart.analytics/index.js", "@grapecity/wijmo.vue2.chart.animation": "npm:@grapecity/wijmo.vue2.chart.animation/index.js", "@grapecity/wijmo.vue2.chart.annotation": "npm:@grapecity/wijmo.vue2.chart.annotation/index.js", "@grapecity/wijmo.vue2.chart.finance.analytics": "npm:@grapecity/wijmo.vue2.chart.finance.analytics/index.js", "@grapecity/wijmo.vue2.chart.finance": "npm:@grapecity/wijmo.vue2.chart.finance/index.js", "@grapecity/wijmo.vue2.chart.hierarchical": "npm:@grapecity/wijmo.vue2.chart.hierarchical/index.js", "@grapecity/wijmo.vue2.chart.interaction": "npm:@grapecity/wijmo.vue2.chart.interaction/index.js", "@grapecity/wijmo.vue2.chart.radar": "npm:@grapecity/wijmo.vue2.chart.radar/index.js", "@grapecity/wijmo.vue2.chart": "npm:@grapecity/wijmo.vue2.chart/index.js", "@grapecity/wijmo.vue2.core": "npm:@grapecity/wijmo.vue2.core/index.js", "@grapecity/wijmo.vue2.gauge": "npm:@grapecity/wijmo.vue2.gauge/index.js", "@grapecity/wijmo.vue2.grid.detail": "npm:@grapecity/wijmo.vue2.grid.detail/index.js", "@grapecity/wijmo.vue2.grid.filter": "npm:@grapecity/wijmo.vue2.grid.filter/index.js", "@grapecity/wijmo.vue2.grid.grouppanel": "npm:@grapecity/wijmo.vue2.grid.grouppanel/index.js", '@grapecity/wijmo.vue2.grid.search': 'npm:@grapecity/wijmo.vue2.grid.search/index.js', "@grapecity/wijmo.vue2.grid.multirow": "npm:@grapecity/wijmo.vue2.grid.multirow/index.js", "@grapecity/wijmo.vue2.grid.sheet": "npm:@grapecity/wijmo.vue2.grid.sheet/index.js", '@grapecity/wijmo.vue2.grid.transposed': 'npm:@grapecity/wijmo.vue2.grid.transposed/index.js', "@grapecity/wijmo.vue2.grid": "npm:@grapecity/wijmo.vue2.grid/index.js", "@grapecity/wijmo.vue2.input": "npm:@grapecity/wijmo.vue2.input/index.js", "@grapecity/wijmo.vue2.olap": "npm:@grapecity/wijmo.vue2.olap/index.js", "@grapecity/wijmo.vue2.viewer": "npm:@grapecity/wijmo.vue2.viewer/index.js", "@grapecity/wijmo.vue2.nav": "npm:@grapecity/wijmo.vue2.nav/index.js", "@grapecity/wijmo.vue2.base": "npm:@grapecity/wijmo.vue2.base/index.js", 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.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' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);