Over a million developers have joined DZone.

Learn MVC Using Angular PDF File Viewer

DZone's Guide to

Learn MVC Using Angular PDF File Viewer

In this post, we discuss the basics of using Angular with MVC by the Mozilla Labs supported Angular library, PDF File Viewer, to create a simple application.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.


This article demonstrates how to use Angular PDF File Viewer in Visual Studio 2017.

Angular PDF File Viewer

Angular Portable Document Format (PDF) File Viewer is built with HTML 5 and supported by Mozilla Labs. It is a web standard based platform for parsing and rendering PDFs.


The delegate service injects this Controller, so you can fetch an instance using its delegate handle and call methods.

The following methods are available to the delegate.

  • Prev
  • Next
  • Zoom In
  • Zoom Out
  • Zoom To
  • Rotate
  • Page Count
  • Go to Page
  • Load

Following the below steps, you can use Angular File Upload in AngularJS in MVC.

  • Create an MVC Project.
  • Configure an Angular PDF File Viewer.
  • Work in Angular PDF File Viewer.

Create MVC Project

Open Visual Studio 2017.


Go to New >> New project. Now it will open the "New Project" window.


You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in the “Solution name” text box and click OK.


One more window should appear. Select MVC Template in this pop-up and click OK. Now, start cropping the image.

Configure Angular PDF File Viewer

You can download the plug-in from.

Open the _Layout.cshtml; it must refer the .js file from the downloaded folder to this view page.

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />  
 <link href="~/PlugIn/AngularPdf/basscss.min.css" rel="stylesheet" />  
 <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />  
 <script src="~/PlugIn/AngularPdf/pdf.combined.js"></script>  
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
 <script src="~/Scripts/bootstrap.min.js"></script>  
 <script src="~/PlugIn/angular/angular.min.js"></script>  
 <script src="~/PlugIn/AngularPdf/angular-pdf-viewer.min.js"></script>  
 <script src="~/PlugIn/angular-ui-router/release/angular-ui-router.js"></script>  

Link your Angular configurable file.

<script src="~/App/App.module.js"></script>  
<script src="~/App/App.config.js"></script>  
<script src="~/App/PDFController.js"></script>  

Angular Module

You need to include the module as a dependency of your application.

var PDf = angular  
.module('PDf', ['ui.router', 'pdf']);   

Work in Angular PDF File Viewer

“PDF” is my Angular module's name, so I have added the “ng-app.”

<div class="container body-content" ng-app="PDf">  


<div class="jumbotron text-center">  
    <h1>Angular PDF Viewer</h1>  
<div class="row" ng-controller="PdfController">  
    <div class="col-md-2">  
    <div class="col-md-8">  
        <pdf-viewer delegate-handle="relativity-special-general-theory"  
    <div class="col-md-2">  

The directive <pdf-viewer> can manage the URL, scale Request Header, and delegate-handler. They can also be set using the attributes. The pdfDelegate delegate service allows you to access and control individual parts of a directive. This allows us to have multiple instances of the same directive in the same Controller.

Angular Controller

Initiate the File to object. This object will be loaded from the local host or URL. Create one folder in the Solution Explorer, then keep it all in the PDF; or you can use Angular service for URLs, and get the file from the database.


PDf.controller('PdfController', function ($scope, pdfDelegate, $log, $location) {  

$scope.pdfUrl = $location.$$protocol + '://'+$location.$$host+':'+$location.$$port+'/pdf/example.pdf';  

Click F5 button to run the application. Now, it will appear in the browser and you can see the result.

Output 1


PDF is loaded in the same HTML page with the tool bar.

Output 2


The default toolbar can be shown or hidden using the show-toolbar attribute. If needed, you can place the toolbar on a separate $scope.

If you have any queries, please tell me through the comments section.

Happy Coding!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

mvc ,web dev ,angular ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}