FlexGrid
PDF Export
The sample demonstrates how to export FlexGrid content to a PDF file.
Features
You can use the FlexGridPdfConverter, a PDFKit-based JavaScript library, to export FlexGrid to PDF (Portable Document Format) without using any server-side code.
To export a FlexGrid, you need to use the FlexGridPdfConverter.export function that takes the following arguments:
- embeddedFonts: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
- styles: It is used to set up the style for the grid elements and link them with the embedded fonts.
- Export settings.
In this sample, you can change the following export settings using the menus above:
- scaleMode: Determines how the FlexGrid content should be scaled in order to fit the page.
- orientation: Determines the orientation of pages.
- exportMode: Determines which part of the FlexGrid should be exported (all of the data or only the current selection).
You can also specify some security settings, such as user password, owner password and permissions, to protect the exported PDF content.
Grouping support
This sample shows how the row grouping feature of the FlexGrid is supported in the FlexGridPdfConverter.
Merging support
This sample shows how the cell merging feature of the FlexGrid is supported in the FlexGridPdfConverter.
Tree view support and font embedding
This sample shows how the tree view feature of the FlexGrid is supported in the FlexGridPdfConverter.
In this sample, FlexGrid uses font Fira and two typefaces, FiraSans-Regular.ttf and FiraSans-Bold.ttf, are embeded into the document. The FiraSans-Bold.ttf (boldface) typeface is used to display the header cells, and the FiraSans-Regular.ttf typeface is used for rest of the content.
To achieve this, the following export settings are used:
- embeddedFonts: Provides information to the export library, about various custom fonts to be embedded, such as URL, name, style, weight.
- styles: It is used to set up the style for the grid elements and link them with the embedded fonts.
using C1.Web.Mvc; using C1.Web.Mvc.Grid; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static IList<ITreeItem> treeViewData = null; private static IEnumerable<Sale> normalData = Sale.GetData(25); public ActionResult PDFExport() { if (treeViewData == null) { treeViewData = MvcExplorer.Models.Folder.Create(Server.MapPath("~")).Children; } ViewBag.GroupedFlexGridData = normalData; ViewBag.MergedFlexGridData = normalData; ViewBag.TreeViewData = treeViewData; return View(); } } }
@using C1.Web.Mvc.Grid @{ IEnumerable<Sale> groupedFlexGridData = ViewBag.GroupedFlexGridData; IEnumerable<Sale> mergedFlexGridData = ViewBag.MergedFlexGridData; IList<ITreeItem> treeViewData = ViewBag.TreeViewData; ViewBag.DemoDescription = false; } @section Styles{ <style> .fixed-top { z-index: 999; position: fixed; top: 0px; } .reduce { padding-bottom: 0px; } </style> } @section Scripts{ <script> var hasAddFixedStyle, groupedGrid, mergedGrid, treeViewGrid, exportSettings, settingsDiv, settingsDivDfScroll, securitySettingsDiv; c1.documentReady(function () { hasAddFixedStyle = false; groupedGrid = wijmo.Control.getControl("#groupingFlexGrid"); mergedGrid = wijmo.Control.getControl("#mergingFlexGrid"); treeViewGrid = wijmo.Control.getControl("#treeFlexGrid"); settingsDiv = document.getElementById("exportSettingsDiv"); securitySettingsDiv = document.getElementById("securitySettingsDiv"); defaultScrollTop = getScrollingTop(settingsDiv); exportSettings = { exportMode: wijmo.grid.pdf.ExportMode.All, orientation: wijmo.pdf.PdfPageOrientation.Portrait, scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize, version: "v1_3", }; window.onscroll = function () { var documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (documentScrollTop <= defaultScrollTop && hasAddFixedStyle) { showDiv(securitySettingsDiv); clearFixedStyles(settingsDiv); hasAddFixedStyle = false; } else if (documentScrollTop > defaultScrollTop && !hasAddFixedStyle) { hideDiv(securitySettingsDiv); addFixedStyles(settingsDiv); hasAddFixedStyle = true; } }; window.onresize = function () { if (hasAddFixedStyle) { clearFixedStyles(settingsDiv); addFixedStyles(settingsDiv); } }; updateHeaders(); }); function updateHeaders() { var flex = wijmo.Control.getControl("#mergingFlexGrid"); if (flex) { // insert new row if not yet if (flex.columnHeaders.rows.length === 1) { flex.columnHeaders.rows.insert(0, new wijmo.grid.Row()); } flex.columnHeaders.rows[0].allowMerging = true; // set headings so the cells merge for (var i = 0; i < flex.columns.length; i++) { var hdr = 'String'; switch (flex.columns[i].binding) { case 'ID': case 'Amount': case 'Discount': hdr = 'Number'; break; case 'Active': hdr = 'Boolean'; break; } flex.columnHeaders.setCellData(0, i, hdr); } } } function clearFixedStyles(obj) { obj.style.height = ""; obj.style.width = ""; var classes = obj.className.split(/\s+/g); classes.splice(classes.indexOf("fixed-top"), 1); obj.className = classes.join(" "); if (settingsDiv.offsetParent != null) { let parentObj = settingsDiv.offsetParent; parentObj.style.paddingTop = ''; } } function addFixedStyles(obj) { if (settingsDiv.offsetParent != null) { let parentObj = settingsDiv.offsetParent; parentObj.style.paddingTop = settingsDiv.offsetHeight + "px"; } obj.style.height = settingsDiv.offsetHeight + "px"; obj.style.width = settingsDiv.offsetWidth + "px"; obj.className = obj.className + " fixed-top"; } function showDiv(obj) { if (obj.style.display == "none") obj.style.display = ""; } function hideDiv(obj) { obj.style.display = "none"; } function getScrollingTop(obj) { var scrollTop = obj.offsetTop; if (obj.offsetParent != null) { scrollTop += getScrollingTop(obj.offsetParent); } return scrollTop; } function onAllowMergingChanged(menu) { var mergingHeader = menu.selectedItem.Header; menu.header = "@(Resources.FlexGrid.PDFExport_AllowMerging): <b>" + mergingHeader + "</b>"; mergedGrid.allowMerging = menu.selectedItem.CommandParameter; } function exportGroupedGrid() { var fontFile = { source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }, font = new wijmo.pdf.PdfFont('ipaexg'); wijmo.grid.pdf.FlexGridPdfConverter.export(groupedGrid, 'FlexGrid.pdf', { maxPages: 10, exportMode: exportSettings.exportMode, scaleMode: exportSettings.scaleMode, documentOptions: { userPassword: getPassword('User'), ownerPassword: getPassword('Owner'), version: exportSettings.version, permissions: { annotating: getPermission('Annotating'), contentAccessibility: getPermission('ContentAccessibility'), copying: getPermission('Copying'), documentAssembly: getPermission('DocumentAssembly'), fillingForms: getPermission('FillingForms'), modifying: getPermission('Modifying'), printing: getPermission('Printing') }, pageSettings: { layout: exportSettings.orientation }, header: { declarative: { text: '&[Page]\\&[Pages]\theader\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '&[Page]\\&[Pages]\tfooter\t&[Page]\\&[Pages]' } }, info: { author: 'C1', title: 'PdfDocument sample', keywords: 'PDF, C1, sample', subject: 'PdfDocument' } }, embeddedFonts: [fontFile], styles: { cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6', font: font }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } function exportMergedGrid() { var fontFile = { source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }, font = new wijmo.pdf.PdfFont('ipaexg'); wijmo.grid.pdf.FlexGridPdfConverter.export(mergedGrid, 'FlexGrid.pdf', { maxPages: 10, exportMode: exportSettings.exportMode, scaleMode: exportSettings.scaleMode, documentOptions: { userPassword: getPassword('User'), ownerPassword: getPassword('Owner'), version: exportSettings.version, permissions: { annotating: getPermission('Annotating'), contentAccessibility: getPermission('ContentAccessibility'), copying: getPermission('Copying'), documentAssembly: getPermission('DocumentAssembly'), fillingForms: getPermission('FillingForms'), modifying: getPermission('Modifying'), printing: getPermission('Printing') }, pageSettings: { layout: exportSettings.orientation }, header: { declarative: { text: '&[Page]\\&[Pages]\theader\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '&[Page]\\&[Pages]\tfooter\t&[Page]\\&[Pages]' } }, info: { author: 'C1', title: 'PdfDocument sample', keywords: 'PDF, C1, sample', subject: 'PdfDocument' } }, embeddedFonts: [fontFile], styles: { cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6', font: font }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } function exportTreeViewGrid() { wijmo.grid.pdf.FlexGridPdfConverter.export(treeViewGrid, 'FlexGrid.pdf', { maxPages: 10, exportMode: exportSettings.exportMode, scaleMode: exportSettings.scaleMode, embeddedFonts: [{ source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Regular.ttf"))', name: 'fira', style: 'normal', weight: 'normal', sansSerif: true }, { source: '@(Url.Content("~/Content/fonts/fira/FiraSans-Bold.ttf"))', name: 'fira', style: 'normal', weight: 'bold', sansSerif: true }], documentOptions: { userPassword: getPassword('User'), ownerPassword: getPassword('Owner'), version: exportSettings.version, permissions: { annotating: getPermission('Annotating'), contentAccessibility: getPermission('ContentAccessibility'), copying: getPermission('Copying'), documentAssembly: getPermission('DocumentAssembly'), fillingForms: getPermission('FillingForms'), modifying: getPermission('Modifying'), printing: getPermission('Printing') }, pageSettings: { layout: exportSettings.orientation }, header: { declarative: { text: '&[Page]\\&[Pages]\theader\t&[Page]\\&[Pages]' } }, footer: { declarative: { text: '&[Page]\\&[Pages]\tfooter\t&[Page]\\&[Pages]' } }, info: { author: 'C1', title: 'PdfDocument sample', keywords: 'PDF, C1, sample', subject: 'PdfDocument' } }, styles: { cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6', font: { family: 'fira' } }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }); } function setScaleMode(menu) { menu.header = "@(Resources.FlexGrid.PDFExport_ScaleMode): <b>" + menu.selectedItem.Header + "</b>"; exportSettings.scaleMode = wijmo.grid.pdf.ScaleMode[menu.selectedItem.Header]; } function setOrientation(menu) { menu.header = "@(Resources.FlexGrid.PDFExport_Orientation): <b>" + menu.selectedItem.Header + "</b>"; exportSettings.orientation = wijmo.pdf.PdfPageOrientation[menu.selectedItem.Header]; } function setExportMode(menu) { menu.header = "@(Resources.FlexGrid.PDFExport_ExportMode): <b>" + menu.selectedItem.Header + "</b>"; exportSettings.exportMode = wijmo.grid.pdf.ExportMode[menu.selectedItem.Header]; } function setPermissionPrinting(menu) { menu.header = "@Resources.FlexGrid.PDFExport_Printing: <b>" + menu.selectedItem.Header + "</b>"; exportSettings.permissionPrinting = menu.selectedItem.Header; } function setVersion(menu) { menu.header = "PDF version: <b>" + menu.selectedItem.Header + "</b>"; switch (menu.selectedItem.Header) { case "1.3": exportSettings.version = "v1_3"; break; case "1.4": exportSettings.version = "v1_4"; break; case "1.5": exportSettings.version = "v1_5"; break; case "1.6": exportSettings.version = "v1_6"; break; case "1.7": exportSettings.version = "v1_7"; break; case "1.7 ExtensionLevel 3": exportSettings.version = "v1_7Ext3"; break; } } function getPassword(user) { return document.querySelector('#tb' + user + 'Password').value; } function getPermission(permissionName) { if (permissionName == 'Printing') { return exportSettings.permissionPrinting || 'NotAllowed'; } else { return document.querySelector('#cb' + permissionName).checked; } } </script> } @section Summary{ <p>@Html.Raw(Resources.FlexGrid.PDFExport_Summary)</p> } <div class="copy well"> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text1)</p> <ul> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li1)</li> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li2)</li> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li3)</li> </ul> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text2)</p> <ul> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li4)</li> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li5)</li> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li6)</li> </ul> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text8)</p> </div> <div class="copy well" id="exportSettingsDiv"> <b>@Html.Raw(Resources.FlexGrid.PDFExport_ExportSettings)</b> @(Html.C1().Menu().Header(Resources.FlexGrid.PDFExport_ScaleMode + ": <b>ActualSize</b>").OnClientItemClicked("setScaleMode") .MenuItems(items => { items.Add("ActualSize"); items.Add("PageWidth"); items.Add("SinglePage"); })) @(Html.C1().Menu().Header(Resources.FlexGrid.PDFExport_Orientation + ": <b>Portrait</b>").OnClientItemClicked("setOrientation") .MenuItems(items => { items.Add("Portrait"); items.Add("Landscape"); })) @(Html.C1().Menu().Header(Resources.FlexGrid.PDFExport_ExportMode + ": <b>All</b>").OnClientItemClicked("setExportMode") .MenuItems(items => { items.Add("All"); items.Add("Selection"); })) <div id="securitySettingsDiv"> <p></p> <b>@Html.Raw(Resources.FlexGrid.PDFExport_SecuritySettings)</b> <div class="panel-body reduce"> <div class="row"> <div class="col-sm-3"> <input type="text" id="tbUserPassword" class="form-control" placeholder="@Resources.FlexGrid.PDFExport_UserPassword" /> </div> <div class="col-sm-3"> <input type="text" id="tbOwnerPassword" class="form-control" placeholder="@Resources.FlexGrid.PDFExport_OwnerPassword" /> </div> </div> <hr /> <div class="row"> <div class="col-sm-3"> @(Html.C1().Menu().Header("PDF version: <b>1.3</b>").OnClientItemClicked("setVersion") .MenuItems(items => { items.Add("1.3"); items.Add("1.4"); items.Add("1.5"); items.Add("1.6"); items.Add("1.7"); items.Add("1.7 ExtensionLevel 3"); })) </div> </div> <div class="panel-body reduce"> <div class="row"> <div class="col"> <b>@Resources.FlexGrid.PDFExport_Permissions</b> (<i>@Resources.FlexGrid.PDFExport_PermissionsNote</i>) </div> </div> <div class="row"> <div class="col-sm-3"> <div class="checkbox"> <label><input type="checkbox" id="cbAnnotating" />@Resources.FlexGrid.PDFExport_Annotating</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbContentAccessibility" />@Resources.FlexGrid.PDFExport_ContentAccessibility</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbCopying" />@Resources.FlexGrid.PDFExport_Copying</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbDocumentAssembly" />@Resources.FlexGrid.PDFExport_DocumentAssembly</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbFillingForms" />@Resources.FlexGrid.PDFExport_FillingForms</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbModifying" />@Resources.FlexGrid.PDFExport_Modifying</label> </div> </div> </div> @(Html.C1().Menu().Header(Resources.FlexGrid.PDFExport_Printing + ": <b>NotAllowed</b>").OnClientItemClicked("setPermissionPrinting") .MenuItems(items => { items.Add("NotAllowed"); items.Add("AllowLowResolution"); items.Add("AllowHighResolution"); })) </div> </div> </div> </div> <h3>@Html.Raw(Resources.FlexGrid.PDFExport_Title1)</h3> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text3)</p> <button class="btn btn-default" onclick="exportGroupedGrid()">@Html.Raw(Resources.FlexGrid.PDFExport_Export)</button> <br /><br /> @(Html.C1().FlexGrid<Sale>().Id("groupingFlexGrid") .Bind(groupedFlexGridData) .SelectionMode(SelectionMode.ListBox) .HeadersVisibility(HeadersVisibility.All) .ShowGroups(true) .GroupBy("Product", "Country", "Amount") .CssClass("grid") .AllowMerging(AllowMerging.All) .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start").Header("Start Date").Format("d")); bl.Add(cb => cb.Binding("End").Header("End Date").Format("d")); bl.Add(cb => cb.Binding("Country")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Amount").Header("Amount22").Format("c").Aggregate(Aggregate.Sum)); bl.Add(cb => cb.Binding("Color")); bl.Add(cb => cb.Binding("Amount2").Header("Pending").Format("c2")); bl.Add(cb => cb.Binding("Discount").Format("p1")); bl.Add(cb => cb.Binding("Active")); }) ) <br /> <br /> <div> <h3>@Html.Raw(Resources.FlexGrid.PDFExport_Title2)</h3> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text4)</p> @(Html.C1().Menu().Header(Resources.FlexGrid.PDFExport_AllowMerging + ": <b>All</b>") .MenuItems(items => { items.Add("All", AllowMerging.All); items.Add("None", AllowMerging.None); items.Add("AllHeaders", AllowMerging.AllHeaders); items.Add("Cells", AllowMerging.Cells); items.Add("ColumnHeaders", AllowMerging.ColumnHeaders); items.Add("RowHeaders", AllowMerging.RowHeaders); }).OnClientItemClicked("onAllowMergingChanged") ) <button class="btn btn-default" onclick="exportMergedGrid()">@Html.Raw(Resources.FlexGrid.PDFExport_Export)</button> <br /><br /> @(Html.C1().FlexGrid<Sale>().Id("mergingFlexGrid") .AllowDragging(AllowDragging.None) .AllowMerging(AllowMerging.All) .Bind(mergedFlexGridData) .CssClass("grid") .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID").Align("right")); bl.Add(cb => cb.Binding("Country").AllowMerging(true)); bl.Add(cb => cb.Binding("Product").AllowMerging(true)); bl.Add(cb => cb.Binding("Color").AllowMerging(true)); bl.Add(cb => cb.Binding("Amount").Header("Amount22").Format("n0").Aggregate(Aggregate.Sum).DataType(DataType.Number).Align("right")); bl.Add(cb => cb.Binding("Discount").Format("p0").DataType(DataType.Number).Align("right").Aggregate(Aggregate.Avg)); bl.Add(cb => cb.Binding("Active").AllowMerging(true).DataType(DataType.Boolean).Align("center")); }) ) <br /> <br /> <div> <h3>@Html.Raw(Resources.FlexGrid.PDFExport_Title3)</h3> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text5)</p> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text6)</p> <p>@Html.Raw(Resources.FlexGrid.PDFExport_Text7)</p> <ul> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li1)</li> <li>@Html.Raw(Resources.FlexGrid.PDFExport_Li2)</li> </ul> <button class="btn btn-default" onclick="exportTreeViewGrid()">@Html.Raw(Resources.FlexGrid.PDFExport_Export)</button> <br /><br /> @(Html.C1().FlexGrid().Id("treeFlexGrid") .Bind(treeViewData) .ChildItemsPath("Children") .CssClass("grid custom-flex-grid") .AllowResizing(AllowResizing.None) .SelectionMode(SelectionMode.ListBox) .HeadersVisibility(HeadersVisibility.Column) .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("Header").Width("*")); bl.Add(cb => cb.Binding("Size").Width("80")); }) ) </div> </div>