PDF Viewer

The PdfViewer control allows your users to display PDF documents in web or hybrid mobile apps. The PdfViewer supports scrolling, paging, zooming and much more. Use this example to explore the baked-in features.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as input from '@grapecity/wijmo.input'; import * as viewer from '@grapecity/wijmo.viewer'; document.readyState === 'complete' ? init() : window.onload = init; function init() { let pdfViewer = new viewer.PdfViewer('#pdfViewer', { serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.5.20193.222/api/pdf', filePath: 'PdfRoot/DefaultDocument.pdf', zoomFactorChanged: (sender) => { zoomFactor.value = sender.zoomFactor; } }); document.querySelector('#cbContinuousViewMode').addEventListener('click', (e) => { pdfViewer.viewMode = e.target.checked ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; }); let mouseMode = new input.Menu('#lbMouseMode', { itemClicked: (sender) => { pdfViewer.mouseMode = sender.selectedValue; updateMenuHeader(sender, 'Mouse Mode'); } }); updateMenuHeader(mouseMode, 'Mouse Mode'); document.querySelector('#cbFullScreen').addEventListener('click', e => { pdfViewer.fullScreen = e.target.checked; }); let zoomFactor = new input.InputNumber('#txtZoomFactor', { min: 0.05, max: 10, step: 0.1, format: 'n2', value: pdfViewer.zoomFactor, valueChanged: (sender) => { if (sender.value >= sender.min && sender.value <= sender.max) { pdfViewer.zoomFactor = sender.value; } } }); 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>Overview</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="col-md-12"> <div class="row"> <div id="pdfViewer"></div> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input id="cbContinuousViewMode" type="checkbox" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <select id="lbMouseMode"> <option value="SelectTool" selected>SelectTool</option> <option value="MoveTool">MoveTool</option> <option value="RubberbandTool">RubberbandTool</option> <option value="MagnifierTool">MagnifierTool</option> </select> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="cbFullScreen" type="checkbox" /> Full Screen </label> </div> </div> <div class="col-mod-4"> <label class="col-md-2 control-label">Zoom Factor</label> <div class="col-md-2"> <input id="txtZoomFactor" /> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body { margin-bottom: 24px; } .wj-viewer { width: 100%; display: block; }
(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.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', '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);