Wijmo 5

PdfViewer 101

This page shows how to get started with Wijmo's PdfViewer control for Angular.

Getting Started

Steps for getting started with the PdfViewer control in AngularJS applications:

  1. Set up C1 Web API Pdf Services. Please refer to How to set up C1 Web API Pdf Services.
  2. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
  3. Add a component to provide data and logic.
  4. Add a PdfViewer to the page and set its serviceUrl and filePath properties.

The C1 Web API Pdf Services uses C1PdfDocumentSource to render and export pdf files. Please refer to How to set up C1 Web API Pdf Services for details.

To show the pdf file from C1 Web API Pdf Services, set the following basic properties:

  1. serviceUrl: The url of C1 Web API Pdf Services. For example, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf'.
  2. filePath: The full path to the pdf file. For example, 'PdfRoot/C1XapOptimizer.pdf'.

    The 'PdfRoot' is the key of the pdf file disk storage provider which is registered at server for locating specified pdf file.
    The 'C1XapOptimizer.pdf' is the relative path of the pdf file which can be located by the disk storage provider.

Result (live):


<!DOCTYPE html> <html> <head> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <!-- Configure SystemJS --> <script src="systemjs.config.js"></script> <!-- Load the root application module --> <script> System.import('./src/app'); </script> </head> <body> <!-- Add root application component --> <app-cmp> <wj-pdf-viewer [serviceUrl]="serviceUrl" [filePath]="filePath"> </wj-pdf-viewer> </app-cmp> </body> </html>
import * as wjcViewer from 'wijmo/wijmo.viewer'; // Angular import { Component, EventEmitter, Input, Inject, enableProdMode} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import { WjInputModule } from 'wijmo/wijmo.angular2.input'; import { WjViewerModule } from 'wijmo/wijmo.angular2.viewer'; 'use strict'; // The Explorer application root component. @Component({ selector: 'app-cmp', templateUrl: 'src/app.html' }) export class AppCmp { serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf'; filePath = 'PdfRoot/C1XapOptimizer.pdf'; constructor() { } } @NgModule({ imports: [WjInputModule, WjGridModule, WjViewerModule, BrowserModule], declarations: [AppCmp], bootstrap: [AppCmp] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);

Basic Features

The PdfViewer control has four basic properties that allow you to customize its appearance and behavior:

The example below allows you to see what happens when you change these properties.

Result (live):


<wj-pdf-viewer #pdfViewer [serviceUrl]="serviceUrl" [filePath]="filePath" [fullScreen]="fullScreen" [selectMouseMode]="selectMouseMode" [zoomFactor]="zoomFactor"> </wj-pdf-viewer> <br /> <div class="row"> <div class="form-horizontal"> <div class="form-group"> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicContinuousViewMode" type="checkbox" [(ngModel)]="continuousViewMode" /> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicSelectMouseMode" type="checkbox" [(ngModel)]="selectMouseMode" /> Select Mouse Mode? </label> </div> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="basicFullScreen" type="checkbox" [(ngModel)]="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]=".1" [format]="'n2'"> </wj-input-number> </div> </div> </div> </div> </div>
export class AppCmp { serviceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf'; filePath = 'PdfRoot/C1XapOptimizer.pdf'; fullScreen = false; selectMouseMode = true; zoomFactor = 1; @ViewChild('pdfViewer') pdfViewer: wjcViewer.PdfViewer; private _continuousViewMode = false; constructor() { } get continuousViewMode(): boolean { return this._continuousViewMode; } set continuousViewMode(value: boolean) { if (this._continuousViewMode != value) { this._continuousViewMode = value; this.pdfViewer.viewMode = value ? wjcViewer.ViewMode.Continuous : wjcViewer.ViewMode.Single; } } }