# PdfViewer 101

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

## Getting Started

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

1. Set up C1 Web API PDFDocument Services. Please refer to How to set up C1 Web API PDFDocument Services.
2. Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
3. Include the Wijmo directives in the app module:
   `var app = angular.module('app', ['wj']);`
4. Add a controller to provide data and logic.
5. Add a PdfViewer to the page and set its serviceUrl and filePath properties.

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

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

1. serviceUrl: The url of C1 Web API PDFDocument Services. For example, 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf'.
2. filePath: The full path to the pdf file. For example, 'PdfRoot/DefaultDocument.pdf'.

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

#### Result (live):

HTML
<head> <title>PdfViewer Introduction</title> <!-- ensure IE uses the latest version of IE (yes, yes...) --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Angular/Bootstrap --> <script src="bin/Devel/external/angular.js"></script> <link rel="stylesheet" type="text/css" href="bin/devel/external/bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /> <!-- Wijmo --> <script wj-src="wijmo" src="bin/Devel/loaders/wijmo.load.module.js"></script> <script wj-src="wijmo.input" src="bin/Devel/loaders/wijmo.load.module.js"></script> <script wj-src="wijmo.grid" src="bin/Devel/loaders/wijmo.load.module.js"></script> <script wj-src="wijmo.viewer" src="bin/Devel/loaders/wijmo.load.module.js"></script> <link href="bin/Devel/sources/styles/wijmo.css" rel="stylesheet" /> <!-- Wijmo-Angular interop --> <script wj-src="wijmo.angular" src="bin/Devel/loaders/wijmo.load.module.js"></script> <!-- app styles/scripts --> <link href="styles/app.css" rel="stylesheet" /> <script src="scripts/app.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <wj-pdf-viewer service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" ></wj-pdf-viewer> </body>
JS
'use strict'; // get reference to app module var app = angular.module('app'); // add controller to app module app.controller('appCtrl', function appCtrl($scope) { $scope.viewerProps = { serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf', filePath: 'pdfroot/DefaultDocument.pdf', }; })

## Basic Features

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

- fullScreen: Indicates whether viewer is under full screen mode.
- mouseMode: Indicates the mouse behavior.
- viewMode: Indicates how to show the document pages.
- zoomFactor: Indicates the current zoom factor to show the document pages.

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

#### Result (live):

Continuous View Mode?
SelectTool MoveTool RubberbandTool MagnifierTool
Full Screen?
Zoom Factor
HTML
<div class="row"> <wj-pdf-viewer control="pdfViewer" service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}" full-screen="viewerProps.fullScreen" mouse-mode="viewerProps.mouseMode" zoom-factor="viewerProps.zoomFactor"> </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 id="basicContinuousViewMode" type="checkbox" ng-model="viewerProps.continuousViewMode"/> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <wj-menu value="viewerProps.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 id="basicFullScreen" type="checkbox" ng-model="viewerProps.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="viewerProps.zoomFactor" min="0.05" max="10" step=".1" format="'n2'"> </wj-input-number> </div> </div> </div> </div> </div>
JS
app.controller('appCtrl', function appCtrl($scope) { $scope.viewerProps = { serviceUrl: 'https://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/pdf', filePath: 'PdfRoot/DefaultDocument.pdf', fullScreen : false, mouseMode: 'SelectTool', zoomFactor: 1, continuousViewMode: false }; $scope.pdfViewer = null; $scope.$watch('viewerProps.continuousViewMode', function () { var continuousViewMode = $scope.viewerProps.continuousViewMode; if ($scope.pdfViewer) { $scope.pdfViewer.viewMode = continuousViewMode ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single; } }); });