FlexGrid
Tags
The sample demonstrates how to export FlexGrid content to a PDF file. Tags Support.
Features
Sample
Security settings:
Permissions (require owner password)
Description
This sample shows how to create a tagged PDF.
It uses the tagged, tagContent properties to add tags by cells in FlexGrid when export.
The sample also uses the tag method to create tags and mark content and the addTag method to add tags to the logical document tree.
Note: Tagged PDF requires document version 1.4 or higher.
You can also specify some security settings, such as user password, owner password and permissions, to protect the exported PDF content.
Source
PDFExportTagsController.cs
using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static IEnumerable<Sale> pdfExportTagsData = Sale.GetData(500); public ActionResult PDFExportTags() { FullCountry taggedCountry = FullCountry.GetCountry("US"); ViewBag.taggedCountry = taggedCountry; IEnumerable<Sale> taggedFlexGridData = pdfExportTagsData.Where(s => taggedCountry.Name.Equals(s.Country)).Take(10); ViewBag.TaggedFlexGridData = taggedFlexGridData; IEnumerable<Sale> taggedSumByProducts = taggedFlexGridData .GroupBy(s => s.Product) .Select(g => new Sale { Product = g.Key, Amount2 = g.Sum(s => s.Amount2) }); ViewBag.TaggedSumByProducts = taggedSumByProducts; return View(); } } }
PDFExportTags.cshtml
@using C1.Web.Mvc.Grid @{ IEnumerable<Sale> taggedFlexGridData = ViewBag.TaggedFlexGridData; FullCountry taggedCountry = ViewBag.taggedCountry; IEnumerable<Sale> taggedSumByProducts = ViewBag.TaggedSumByProducts; } @section Styles{ <style> .fixed-top { z-index: 999; position: fixed; top: 0px; } .reduce { padding-bottom: 0px; } </style> } @section Scripts{ <script> var taggedGrid, taggedFlexPie, exportSettings, settingsDiv, securitySettingsDiv; c1.documentReady(function () { taggedGrid = wijmo.Control.getControl("#taggedFlexGrid"); taggedFlexPie = wijmo.Control.getControl("#taggedFlexPie"); settingsDiv = document.getElementById("exportSettingsDiv"); securitySettingsDiv = document.getElementById("securitySettingsDiv"); exportSettings = { exportMode: wijmo.grid.pdf.ExportMode.All, orientation: wijmo.pdf.PdfPageOrientation.Portrait, scaleMode: wijmo.grid.pdf.ScaleMode.ActualSize, version: "v1_4", }; }); function setPermissionPrinting(menu) { menu.header = "@FlexGridRes.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; } } function formatItemOfTaggedGrid(args) { if (args.panel.columns[args.col].binding != "Discount") { return; } var data = parseFloat(args.data); if (!isNaN(data)) { var r = args.clientRect, x = r.right + 2, y = r.top + (r.bottom - r.top) / 2 - 3; args.tagContent = args.canvas.beginTagContent(wijmo.pdf.PdfTagType.P); args.canvas.drawText(data > 10 ? "High discount" : (data < 8 ? "Low discount" : "Medium discount"), x, y, { font: new wijmo.pdf.PdfFont('times', 10, 'italic', 'normal'), brush: wijmo.Color.fromString(data > 10 ? "#FF0000" : (data < 8 ? "#448800" : "#888800")) }); } args.canvas.endTagContent(); } function exportTaggedGrid() { var fontFile = { source: 'https://demo.grapecity.com/wijmo/sample/fonts/ipaexg.ttf', name: 'ipaexg' }, font = new wijmo.pdf.PdfFont('ipaexg'), fontNormal = new wijmo.pdf.PdfFont('times', 12, 'normal', 'normal'), fontBold = new wijmo.pdf.PdfFont('times', 12, 'normal', 'bold'), fontHeader = new wijmo.pdf.PdfFont('times', 20, 'normal', 'bold'); var doc = new wijmo.pdf.PdfDocument({ userPassword: getPassword('User'), ownerPassword: getPassword('Owner'), version: exportSettings.version, tagged: true, permissions: { annotating: getPermission('Annotating'), contentAccessibility: getPermission('ContentAccessibility'), copying: getPermission('Copying'), documentAssembly: getPermission('DocumentAssembly'), fillingForms: getPermission('FillingForms'), modifying: getPermission('Modifying'), printing: getPermission('Printing') }, pageSettings: { margins: { left: 50, right: 20, top: 20, bottom: 20 } }, 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' }, ended: function (_, args) { wijmo.pdf.saveBlob(args.blob, 'FlexGrid.pdf'); } }); // Title and summary doc.addTag(doc.tag(wijmo.pdf.PdfTagType.H1, function() { doc.drawText('Sale Report', undefined, undefined, { font: fontHeader }); })); doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() { doc.drawText('This report shows the state of sales in a country.', undefined, undefined, { font: fontNormal }); })); doc.moveDown(2); // Country information doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() { doc.drawText('Country: ', undefined, undefined, { font: fontBold, continued: true }); doc.drawText('@taggedCountry.Name', undefined, undefined, { font: fontNormal }); })); doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() { doc.drawText('Name: ', undefined, undefined, { font: fontBold, continued: true }); doc.drawText('United States of America', undefined, undefined, { font: fontNormal }); })); doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() { doc.drawText('Area: ', undefined, undefined, { font: fontBold, continued: true }); doc.drawText('9.834 million km²', undefined, undefined, { font: fontNormal }); })); doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function() { doc.drawText('Population: ', undefined, undefined, { font: fontBold, continued: true }); doc.drawText('333,733,637', undefined, undefined, { font: fontNormal }); })); doc.moveDown(2); // Add grid content doc.addTag(doc.tag(wijmo.pdf.PdfTagType.P, function () { doc.drawText('Sale details: ', undefined, undefined, { font: fontBold }); })); wijmo.grid.pdf.FlexGridPdfConverter.draw(taggedGrid, doc, doc.width+200, null, { embeddedFonts: [fontFile], styles: { cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6', font: font }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } }, formatItem: formatItemOfTaggedGrid }); doc.moveDown(2); // Add Chart taggedFlexPie.saveImageToDataUrl(wijmo.chart.ImageFormat.Png, function(url) { doc.addTag(doc.tag(wijmo.pdf.PdfTagType.Figure, [ doc.tag(wijmo.pdf.PdfTagType.Caption, function() { doc.drawText('Total revenues by products:', 0, doc.y, { font: fontBold }); }), function() { doc.drawImage(url, 15, doc.y, { height: doc.height * 0.4 }); } ], { actual: 'The chart' })); // Finish the document. doc.end(); }); } </script> } <div class="copy well" id="exportSettingsDiv"> <div id="securitySettingsDiv"> <b>@Html.Raw(FlexGridRes.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="@FlexGridRes.PDFExport_UserPassword" /> </div> <div class="col-sm-3"> <input type="text" id="tbOwnerPassword" class="form-control" placeholder="@FlexGridRes.PDFExport_OwnerPassword" /> </div> </div> <br /> <div class="row"> <div class="col-sm-3"> <c1-menu header="PDF version: <b>1.4</b>" item-clicked="setVersion" selected-index="1"> <c1-menu-item header="1.3"></c1-menu-item> <c1-menu-item header="1.4"></c1-menu-item> <c1-menu-item header="1.5"></c1-menu-item> <c1-menu-item header="1.6"></c1-menu-item> <c1-menu-item header="1.7"></c1-menu-item> <c1-menu-item header="1.7 ExtensionLevel 3"></c1-menu-item> </c1-menu> </div> </div> <div class="panel-body reduce"> <div class="row"> <div class="col"> <b>@FlexGridRes.PDFExport_Permissions</b> (<i>@FlexGridRes.PDFExport_PermissionsNote</i>) </div> </div> <div class="row"> <div class="col-sm-3"> <div class="checkbox"> <label><input type="checkbox" id="cbAnnotating" />@FlexGridRes.PDFExport_Annotating</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbContentAccessibility" />@FlexGridRes.PDFExport_ContentAccessibility</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbCopying" />@FlexGridRes.PDFExport_Copying</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbDocumentAssembly" />@FlexGridRes.PDFExport_DocumentAssembly</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbFillingForms" />@FlexGridRes.PDFExport_FillingForms</label> </div> <div class="checkbox"> <label><input type="checkbox" id="cbModifying" />@FlexGridRes.PDFExport_Modifying</label> </div> </div> </div> <c1-menu header="@(FlexGridRes.PDFExport_Printing + " <b>NotAllowed</b>")" item-clicked="setPermissionPrinting"> <c1-menu-item header="NotAllowed"></c1-menu-item> <c1-menu-item header="AllowLowResolution"></c1-menu-item> <c1-menu-item header="AllowHighResolution"></c1-menu-item> </c1-menu> </div> </div> </div> </div> <button class="btn btn-default" onclick="exportTaggedGrid()">@Html.Raw(FlexGridRes.PDFExport_Export)</button> <br /> <c1-flex-grid id="taggedFlexGrid" selection-mode="ListBox" headers-visibility="All" class="grid" height="200px" auto-generate-columns="false"> <c1-flex-grid-column binding="ID" width="60"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" header="Start Date" format="d" width="100"></c1-flex-grid-column> <c1-flex-grid-column binding="End" header="End Date" format="d" width="100"></c1-flex-grid-column> <c1-flex-grid-column binding="Product" width="80"></c1-flex-grid-column> <c1-flex-grid-column binding="Color" width="60"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" header="Revenue" format="c2" width="100"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p1" width="80"></c1-flex-grid-column> <c1-items-source source-collection="@taggedFlexGridData"></c1-items-source> </c1-flex-grid> <c1-flex-pie id="taggedFlexPie" inner-radius="0.65f" binding-name="Product" binding="Amount2" width="50%"> <c1-items-source source-collection="taggedSumByProducts"></c1-items-source> <c1-flex-pie-datalabel content="{value:c1}" position="@C1.Web.Mvc.Chart.PieLabelPosition.Inside"></c1-flex-pie-datalabel> </c1-flex-pie> @section Summary{ <p>@Html.Raw(FlexGridRes.PDFExport_Summary) @Html.Raw(FlexGridRes.PDFExport_Title4).</p> } @section Description{ <p>@Html.Raw(FlexGridRes.PDFExport_Text9)</p> <p><b>@Html.Raw(FlexGridRes.PDFExport_Text10)</b></p> <p>@Html.Raw(FlexGridRes.PDFExport_Text8)</p> }
Documentation