PDF Viewer

Theme:

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.0.20172.105/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">  <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; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as viewer from '@grapecity/wijmo.viewer'; // import { Component, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { WjViewerModule } from '@grapecity/wijmo.angular2.viewer'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { @ViewChild('pdfViewer') pdfViewer: viewer.PdfViewer; // get continuousViewMode(): boolean { return this.pdfViewer.viewMode === viewer.ViewMode.Continuous; } set continuousViewMode(value: boolean) { this.pdfViewer.viewMode = value ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; } } // @NgModule({ imports: [WjInputModule, WjViewerModule, BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!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">  <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script>  <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <wj-pdf-viewer #pdfViewer [serviceUrl]="'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf'" [filePath]="'PdfRoot/DefaultDocument.pdf'"> </wj-pdf-viewer> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" [(ngModel)]="continuousViewMode" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <wj-menu [(value)]="pdfViewer.mouseMode" [header]="'Mouse Mode'"> <wj-menu-item [value]="0">SelectTool</wj-menu-item> <wj-menu-item [value]="1">MoveTool</wj-menu-item> <wj-menu-item [value]="2">RubberbandTool</wj-menu-item> <wj-menu-item [value]="3">MagnifierTool</wj-menu-item> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" [(ngModel)]="pdfViewer.fullScreen" /> 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"> <wj-input-number [(value)]="pdfViewer.zoomFactor" [min]="0.05" [max]="10" [step]=".1" [format]="'n2'"> </wj-input-number> </div> </div> </div> </div> </div> </div> </div> body { margin-bottom: 24px; } .wj-viewer { width: 100%; display: block; } <template> <div class="container-fluid"> <div class="col-md-12"> <div class="row"> <wj-pdf-viewer serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf" filePath="PdfRoot/DefaultDocument.pdf" :viewMode="viewMode" :mouseMode="mouseMode" :fullScreen="fullScreen" :zoomFactor="zoomFactor" :viewModeChanged="viewModeChanged" :fullScreenChanged="fullScreenChanged" :zoomFactorChanged="zoomFactorChanged"> </wj-pdf-viewer> </div> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input type="checkbox" v-model="continuousViewMode" /> Continuous View Mode </label> </div> </div> <div class="col-md-3"> <wj-menu :value="mouseMode" :header="'Mouse Mode'" :itemClicked="mouseModeChanged"> <wj-menu-item :value="mouseModes.SelectTool"> SelectTool </wj-menu-item> <wj-menu-item :value="mouseModes.MoveTool"> MoveTool </wj-menu-item> <wj-menu-item :value="mouseModes.RubberbandTool"> RubberbandTool </wj-menu-item> <wj-menu-item :value="mouseModes.MagnifierTool"> MagnifierTool </wj-menu-item> </wj-menu> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input type="checkbox" v-model="fullScreen" /> 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"> <wj-input-number :value="zoomFactor" :min=0.05 :max=10 :step=0.1 format="n2" :valueChanged="zoomFactorValueChanged"> </wj-input-number> </div> </div> </div> </div> </div> </div> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import * as viewer from '@grapecity/wijmo.viewer'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.viewer'; // new Vue({ el: '#app', data: { viewMode: viewer.ViewMode.Single, mouseMode: viewer.MouseMode.SelectTool, fullScreen: false, zoomFactor: 1, mouseModes: viewer.MouseMode }, computed: { continuousViewMode: { get() { return this.viewMode; }, set(value) { this.viewMode = value ? viewer.ViewMode.Continuous : viewer.ViewMode.Single; } } }, methods: { viewModeChanged(sender) { this.viewMode = sender.viewMode; }, mouseModeChanged(sender) { if (sender.selectedItem) { this.mouseMode = sender.selectedItem.value; } }, fullScreenChanged(sender) { this.fullScreen = sender.fullScreen; }, zoomFactorChanged(sender) { this.zoomFactor = sender.zoomFactor; }, zoomFactorValueChanged(sender) { this.zoomFactor = sender.value; } } }); </script> <style> body { margin-bottom: 24px; } .container-fluid .wj-viewer { width: 100%; display: block; } </style> <!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">  <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as viewer from '@grapecity/wijmo.viewer'; import * as wjInput from '@grapecity/wijmo.react.input'; import * as wjViewer from '@grapecity/wijmo.react.viewer'; // class App extends React.Component { // constructor(props) { super(props); this._mouseModeOptions = ['SelectTool', 'MoveTool', 'RubberbandTool', 'MagnifierTool']; // this.state = { viewMode: viewer.ViewMode.Single, mouseMode: viewer.MouseMode.SelectTool, fullScreen: false, zoomFactor: 1 }; } // render() { return <div className="container-fluid"> <div className="col-md-12"> <div className="row"> <wjViewer.PdfViewer filePath="PdfRoot/DefaultDocument.pdf" viewMode={this.state.viewMode} mouseMode={this.state.mouseMode} fullScreen={this.state.fullScreen} zoomFactor={this.state.zoomFactor} viewModeChanged={this.viewModeChanged.bind(this)} fullScreenChanged={this.fullScreenChanged.bind(this)} zoomFactorChanged={this.zoomFactorChanged.bind(this)} serviceUrl="https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf"> </wjViewer.PdfViewer> </div> <br /> <div className="row"> <div className="form-horizontal"> <div className="form-group"> <div className="col-md-3"> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.viewMode} onChange={this.viewModeCheckedChanged.bind(this)}/> Continuous View Mode </label> </div> </div> <div className="col-md-3"> <wjInput.Menu value={this.state.mouseMode} header='Mouse mode' itemClicked={this.mouseModeChanged.bind(this)}> <wjInput.MenuItem value={viewer.MouseMode.SelectTool}> SelectTool </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.MoveTool}> MoveTool </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.RubberbandTool}> RubberbandToo </wjInput.MenuItem> <wjInput.MenuItem value={viewer.MouseMode.MagnifierTool}> MagnifierTool </wjInput.MenuItem> </wjInput.Menu> </div> <div className="col-md-2"> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.fullScreen} onChange={this.fullScreenCheckedChanged.bind(this)}/> Full Screen </label> </div> </div> <div className="col-mod-4"> <label className="col-md-2 control-label">Zoom Factor</label> <div className="col-md-2"> <wjInput.InputNumber value={this.state.zoomFactor} min={0.05} max={10} step={0.1} format="n2" valueChanged={this.zoomFactorValueChanged.bind(this)}> </wjInput.InputNumber> </div> </div> </div> </div> </div> </div> </div>; } // viewModeChanged(sender) { this.setState({ viewMode: sender.viewMode }); } // viewModeCheckedChanged() { if (this.state.viewMode === viewer.ViewMode.Single) { this.setState({ viewMode: viewer.ViewMode.Continuous }); } else { this.setState({ viewMode: viewer.ViewMode.Single }); } } // mouseModeChanged(sender) { this.setState({ mouseMode: sender.selectedValue }); } // fullScreenChanged(sender) { this.setState({ fullScreen: sender.fullScreen }); } // fullScreenCheckedChanged() { this.setState({ fullScreen: !this.state.fullScreen }); } // zoomFactorChanged(sender) { this.setState({ zoomFactor: sender.zoomFactor }); } // zoomFactorValueChanged(sender) { this.setState({ zoomFactor: sender.value }); } } // ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Column DataMaps</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <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 id="app"></div> </body> </html> body { margin-bottom: 24px; } .container-fluid .wj-viewer { width: 100%; display: block; }