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 PDFDocument Services. Please refer to How to set up C1 Web API PDFDocument 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 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, ''.
  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 the 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 = ''; viewer.filePath = 'PdfRoot/C1XapOptimizer.pdf';
.wj-viewer{ width:100%; }

Basic Features

The PdfViewer control has the following four basic properties, which 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"> <select id="basicMouseMode"> <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="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'), mouseModeMenu = new wijmo.input.Menu('#basicMouseMode'), zoomFactor = new wijmo.input.InputNumber('#basicZoomFactor'), continuousViewMode = document.getElementById('basicContinuousViewMode'); updateMouseModeMenuHeader(); // initialize PdfViewer's properties viewer.serviceUrl = ''; viewer.filePath = 'PdfRoot/C1XapOptimizer.pdf'; // fullScreen fullScreen.checked = viewer.fullScreen; fullScreen.addEventListener('change', function () { viewer.fullScreen = this.checked; }); // mouseMode mouseModeMenu.itemClicked.addHandler(function (sender) { viewer.mouseMode = sender.selectedValue; updateMouseModeMenuHeader(); }); // react to zoomFactor changes if mouseMode = RubberbandTool viewer.zoomFactorChanged.addHandler(function (sender) { zoomFactor.value = sender.zoomFactor; }); // 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; }); function updateMouseModeMenuHeader() { mouseModeMenu.header = '<b>Mouse Mode:</b> ' + mouseModeMenu.text; }
.wj-viewer{ width:100%; }