PrintDocument
The PrintDocument 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.
Here is a table with some radial gauges. The table will be included in the PrintDocument.
|
|
And here is a FlexGrid control. Printing it directly would show the scrollbars and the part of the content that is visible. The PrintDocument class allows us to replace that with a printer-friendly version of the grid.
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | // This file locates: "Scripts/Lesson/C1Mvc/PrintDocument.js". c1.documentReady(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: true // includes the CSS style sheets defined in the main document. }); // add C1WebMvc CSS explicitly (only the CSS file ends with '.css' is copied). var links = document.head.querySelectorAll( 'LINK' ); for (var i = 0; i < links.length; i++) { var link = links[i]; if (link.href.match(/C1WebMvc\/WebResources\?/i) && link.rel.match(/stylesheet/i)) { doc.append( '<link href="' + link.href + '" 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(); }); // custom grid rendering function: // renders grid as a table function renderTable(flex) { // start table var tbl = '<table>' ; // headers if (flex.headersVisibility & wijmo.grid.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 = wijmo.escapeHtml(content); } // add cell to row if (panel.cellType == wijmo.grid.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 = '☑' ; } else if (raw === false ) { content = '☐' ; } tr += '<td style="' + style + '">' + content + '</td>' ; } } } tr += '</tr>' ; } return tr; } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1MvcController : Controller { // GET: PrintDocument public ActionResult PrintDocument() { return View(Models.FlexGridData.GetSales(100)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @model IEnumerable < FlexGridData.Sale > < h1 > @Html .Raw(Resources.C1Mvc.PrintDocument_Title) </ h1 > < p > @Html .Raw(Resources.C1Mvc.PrintDocument_Text1) </ p > < p > < button class = "btn btn-default" id = "btnPrintDoc" > @Html .Raw(Resources.C1Mvc.PrintDocument_Text2)</ button > < button class = "btn btn-default" id = "btnPrintDirect" > @Html .Raw(Resources.C1Mvc.PrintDocument_Text3)</ button > </ p > < p > @Html .Raw(Resources.C1Mvc.PrintDocument_Text4) </ p > < table id = "tblGauge" > < tr > < td > < div id = "theGauge1" ></ div > </ td > < td > < div id = "theGauge2" ></ div > </ td > </ tr > </ table > @Html .C1().RadialGauge( "#theGauge1" ).Max(100).Value(20).IsReadOnly( false ) @Html .C1().RadialGauge( "#theGauge2" ).Max(100).Value(20).IsReadOnly( false ) < p > @Html .Raw(Resources.C1Mvc.PrintDocument_Text5) </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ).Bind(Model).Height(250)) |