Getting Started
Steps for getting started with the PdfViewer control in AngularJS applications:
- Set up C1 Web API Pdf Services. Please refer to How to set up C1 Web API Pdf Services.
- Add references to AngularJS, Wijmo, and Wijmo's AngularJS directives.
-
Include the Wijmo 5 directives in the app module:
var app = angular.module('app', ['wj']);
- Add a controller to provide data and logic.
- 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:
-
serviceUrl: The url of C1 Web API Pdf Services.
For example, 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf'.
-
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.
<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>
'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: 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf',
filePath: 'pdfroot/C1XapOptimizer.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.
-
selectMouseMode: Indicates whether clicking and dragging with the mouse in the view panel selects text.
-
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.
<div class="row">
<wj-pdf-viewer control="pdfViewer" service-url="{{viewerProps.serviceUrl}}" file-path="{{viewerProps.filePath}}"
full-screen="viewerProps.fullScreen" select-mouse-mode="viewerProps.selectMouseMode" 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">
<div class="checkbox">
<label>
<input id="basicSelectMouseMode" type="checkbox" ng-model="viewerProps.selectMouseMode"/> Select Mouse Mode?
</label>
</div>
</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>
app.controller('appCtrl', function appCtrl($scope) {
$scope.viewerProps = {
serviceUrl: 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20171.91/api/pdf',
filePath: 'PdfRoot/C1XapOptimizer.pdf',
fullScreen : false,
selectMouseMode: true,
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;
}
});
});
