Security

The sample demonstrates how to export FlexGrid content to password-protected PDF file and how to set PDF file permissions.

The sample uses wijmo.pdf.security module to enhance wijmo.pdf with security capabilities.

The IFlexGridExportSettings' documentOptions property is used to provide security settings, such as userPassword and permissions, to the underlying PdfDocument.

Learn about FlexGrid | FlexGrid API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as grid from '@grapecity/wijmo.grid'; import * as gridPdf from '@grapecity/wijmo.grid.pdf'; import '@grapecity/wijmo.pdf.security'; // import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let menuVersion = new input.Menu('#menuVersion', { selectedIndexChanged: (s) => { if (s.selectedIndex >= 0) { updateMenuHeader(s, 'PDF version'); } } }); updateMenuHeader(menuVersion, 'PDF version'); // let flexGrid = new grid.FlexGrid('#flexGrid', { autoGenerateColumns: false, selectionMode: grid.SelectionMode.ListBox, headersVisibility: grid.HeadersVisibility.All, columns: [ { header: 'ID', binding: 'id' }, { header: 'Start Date', binding: 'start', format: 'd' }, { header: 'End Date', binding: 'end', format: 'd' }, { header: 'Country', binding: 'country' } ], itemsSource: getData(10) }); // document.querySelector('#btnExport').addEventListener('click', () => { let settings = { documentOptions: { userPassword: document.querySelector('#tbUserPassword').value, ownerPassword: document.querySelector('#tbOwnerPassword').value, version: menuVersion.selectedValue, permissions: { annotating: document.querySelector('#cbAnnotating').checked, contentAccessibility: document.querySelector('#cbContentAccessibility').checked, copying: document.querySelector('#cbCopying').checked, documentAssembly: document.querySelector('#cbDocumentAssembly').checked, fillingForms: document.querySelector('#cbFillingForms').checked, modifying: document.querySelector('#cbModifying').checked, printing: document.querySelector('input[name="printing"]:checked').value } }, styles: { cellStyle: { backgroundColor: '#ffffff', borderColor: '#c6c6c6' }, altCellStyle: { backgroundColor: '#f9f9f9' }, groupCellStyle: { backgroundColor: '#dddddd' }, headerCellStyle: { backgroundColor: '#eaeaea' } } }; // gridPdf.FlexGridPdfConverter.export(flexGrid, 'FlexGrid.pdf', settings); }); } // function updateMenuHeader(menu, header) { menu.header = header + ': <b>' + menu.text + '</b>'; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Security</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"> <div class="panel panel-default"> <div class="panel-heading"> Security settings </div> <div class="panel-body"> <div class="row"> <div class="col-sm-3"> <input type="text" id="tbUserPassword" class="form-control" placeholder="User password" /> </div> <div class="col-sm-3"> <input type="text" id="tbOwnerPassword" class="form-control" placeholder="Owner password" /> </div> </div> <hr /> <div class="row"> <div class="col-sm-3"> <select id="menuVersion" class="form-control"> <option value="v1_3" selected>1.3</option> <option value="v1_4">1.4</option> <option value="v1_5">1.5</option> <option value="v1_6">1.6</option> <option value="v1_7">1.7</option> <option value="v1_7Ext3">1.7 ExtensionLevel 3</option> </select> </div> </div> <hr /> <div class="row"> <div class="col"> <b>Permissions</b> (require owner password) </div> </div> <div class="row"> <div class="col-sm-3"> <div class="checkbox"> <label> <input type="checkbox" id="cbAnnotating" />Annotating </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="cbContentAccessibility" />ContentAccessibility </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="cbCopying" />Copying </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="cbDocumentAssembly" />DocumentAssembly </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="cbFillingForms" />FillingForms </label> </div> <div class="checkbox"> <label> <input type="checkbox" id="cbModifying" />Modifying </label> </div> </div> </div> <div class="row"> <div class="col-sm-2">Printing</div> </div> <div class="row"> <div class="col-sm-6"> <label class="radio-inline"> <input name="printing" id="cbPrintingNotSet" value="NotAllowed" type="radio" checked />NotAllowed </label> <label class="radio-inline"> <input name="printing" id="cbPrintingLowRes" value="AllowLowResolution" type="radio" />AllowLowResolution </label> <label class="radio-inline"> <input name="printing" id="cbPrintingHiRes" value="AllowHighResolution" type="radio" />AllowHighResolution </label> </div> </div> </div> </div> <!-- Export button --> <button class="btn btn-default" id="btnExport">Export</button> <!-- FlexGrid --> <div id="flexGrid" class="grid"></div> </div> </body> </html>
export function getData(count) { // data used to generate random items const countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']; // let data = []; let dt = new Date(); // // add count items for (let i = 0; i < count; i++) { // constants used to create data items let date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length); // // create the item let item = { id: i, start: date, end: date, country: countries[countryId] }; // // add the item to the list data.push(item); } // return data; }
body { margin-bottom: 24px; } .grid { margin-top: 20px; height: 300px; }
(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.chart.map': 'npm:@grapecity/wijmo.chart.map/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.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/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.rest': 'npm:@grapecity/wijmo.rest/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/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.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/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);