Learn MVC Using Angular PDF File Viewer

5 Min Read 280 Views

Introduction

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.

Features

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.

MVC

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

MVC

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.

MVC

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">
@RenderBody()
</div>
 HTML Code
<div class="jumbotron text-center">
    <h1>Angular PDF Viewer</h1>
</div>
<div class="row" ng-controller="PdfController">
    <div class="col-md-2">
    </div>
    <div class="col-md-8">
        <pdf-viewer delegate-handle="relativity-special-general-theory"
                    url="pdfUrl"
                    scale="1"
                    show-toolbar="true"></pdf-viewer>
    </div>
    <div class="col-md-2">
    </div>
</div>

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.

MVC 

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

MVC

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

Output 2

MVC

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!

Tags: