Wijmo 5

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 JavaScript 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 Wijmo.
  3. Add markup to serve as the Wijmo control's host.
  4. Initialize the Wijmo control(s) via JavaScript.
  5. (Optional) Add some CSS to customize the pdf viewer control's appearance.

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/webapi/api'.
  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> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/wijmo.grid.js" type="text/javascript"></script> <script src="scripts/wijmo.viewer.js" type="text/javascript"></script> </head> <body> <!-- PdfViewer --> <div id="introPdfViewer"></div> </body> </html>
// create controls var viewer = new wijmo.viewer.PdfViewer('#introPdfViewer'); // initialize PdfViewer's properties viewer.serviceUrl = 'http://demos.componentone.com/aspnet/webapi/api'; viewer.filePath = 'PdfRoot/C1XapOptimizer.pdf';
.wj-viewer{ width:100%; }

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):



<div class="row"> <h4>Result (live):</h4> <div id="basicPdfViewer"></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="basicContinuousViewMode" type="checkbox" /> Continuous View Mode? </label> </div> </div> <div class="col-md-3"> <div class="checkbox"> <label> <input id="basicSelectMouseMode" type="checkbox" /> Select Mouse Mode? </label> </div> </div> <div class="col-md-2"> <div class="checkbox"> <label> <input id="basicFullScreen" 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="basicZoomFactor" type="text" /> </div> </div> </div> </div> </div>
// create controls var viewer = new wijmo.viewer.PdfViewer('#basicPdfViewer'), fullScreen = document.getElementById('basicFullScreen'), selectMouseMode = document.getElementById('basicSelectMouseMode'), zoomFactor = new wijmo.input.InputNumber('#basicZoomFactor'), continuousViewMode = document.getElementById('basicContinuousViewMode'); // initialize PdfViewer's properties viewer.serviceUrl = 'http://demos.componentone.com/aspnet/webapi/api'; viewer.filePath = 'PdfRoot/C1XapOptimizer.pdf'; // fullScreen fullScreen.checked = viewer.fullScreen; fullScreen.addEventListener('change', function () { viewer.fullScreen = this.checked; }); // selectMouseMode selectMouseMode.checked = viewer.selectMouseMode; selectMouseMode.addEventListener('change', function () { viewer.selectMouseMode = this.checked; }); // continousViewMode continuousViewMode.checked = viewer.viewMode == wijmo.viewer.ViewMode.Continuous; continuousViewMode.addEventListener('change', function () { viewer.viewMode = this.checked ? wijmo.viewer.ViewMode.Continuous : wijmo.viewer.ViewMode.Single; }); // zoomFactor - initialize InputNumber's properties zoomFactor.min = 0.05; zoomFactor.max = 10; zoomFactor.step = 0.1; zoomFactor.format = 'n2'; zoomFactor.value = viewer.zoomFactor; zoomFactor.valueChanged.addHandler(function (sender) { if (sender.value < sender.min || sender.value > sender.max) { return; } viewer.zoomFactor = sender.value; });
.wj-viewer{ width:100%; }