Introduction
There’s a trend to implement web applications as so-called Single Page Applications or SPA for short. These are apps that do most of their job in asynchronous and user-responsive way providing an experience similar to desktop apps, avoiding the need for page reloading.
In this article, we’ll show how to create a simple PDF viewer implemented as single page app using ASP.NET Web API for the server side and AngularJS for the client side. We’ve also used a bit of CSS to make it more interesting.
Creating the project
Open Visual Studio and select File -> New -> Project… -> Web -> ASP .NET Web Application as shown on the illustration below:
 |
Pic. 1 Creating new project |
Click OK when you’re ready, and you’ll be redirected to template selection wizard.
Template selection
We’ll use the Web API template as we are going to create a very simple UI based exclusively on HTML / CSS and AngularJS. In this example we didn’t use any authentication, so turned it off by selecting the No Authenticationoption.
 |
Pic. 2 Finalizing project creation |
Click OK when you’re ready to finish the project creation.
Adding packages
Install AngularJS core and Apitron PDF Rasterizer for.NET packages via NuGet package manager.
Server side code
The RenderingController shown below, returns document info and renders pages by request.
publicclassRenderingController : ApiController
{
privatestaticreadonlystring filePath;
static RenderingController()
{
filePath = HttpContext.Current.Server.MapPath(
"~/App_Data/Apitron_Pdf_Kit_in_Action.pdf");
}
///<summary>
/// Gets the rendered page as encoded image.
///</summary>
///<param name="id">Page index, zero-based.</param>
///<returns>String containing encoded image, or null if the call fails.</returns>
publicstring GetRenderedPage(int id)
{
using (Document doc = newDocument(File.OpenRead(filePath)))
{
if (id >= 0 && doc.Pages.Count > id)
{
Bitmap bm = doc.Pages[id].Render(newResolution(72, 72),
newRenderingSettings());
if (bm != null)
{
using (MemoryStream ms = newMemoryStream())
{
bm.Save(ms, ImageFormat.Png);
returnstring.Format("data:image/png;base64,{0}",
Convert.ToBase64String(ms.ToArray()));
}
}
}
}
returnnull;
}
///<summary> Returns document info. </summary>
///<returns>Valid document info object, or null if the call fails.</returns>
publicDocumentInfo GetFileInfo()
{
try
{
using (Document doc = newDocument(File.OpenRead(filePath)))
{
returnnewDocumentInfo() {PageCount = doc.Pages.Count};
}
}
catch (Exception e)
{
Debug.WriteLine(e.Message);
returnnull;
}
}
}
In order to properly map requests to our controller, change the default route registered in WebApiConfig class as folllows:
publicstaticclassWebApiConfig
{
publicstaticvoid Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
UI template
The html provided below is located in the root of the project and set as startup page for it (see index.html). It references the CSS stylesheet and scripts needed to run the AngularJS app.
<!DOCTYPEhtml>
<htmlng-app="mainApp"xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scriptsrc="/Scripts/angular.min.js"></script>
<scriptsrc="/Scripts/app/app.js"></script>
<scriptsrc="/Scripts/app/renderingController.js"></script>
<linkrel="stylesheet"type="text/css"href="Content/styles.css">
</head>
<bodyng-controller="pageByPageRenderingController"ng-init="setup()">
<divclass="navbarContainer">
<ul>
<ling-click="loadFile()">Load file</li>
<ling-click="renderPrev()">Prev</li>
<ling-click="renderNext()">Next</li>
<lionclick="alert('Apitron PDF Rasterizer usage sample,
implemented using WebAPI and AngularJS.')">About</li>
</ul>
</div>
<divclass="viewArea">
<spanid="aligner">{{errorText}}</span>
<imgng-src="/images/loading.gif"class="{{progressBarClass}}"/>
<imgng-src="{{imageSource}}"class="{{pageViewClass}} shadow"/>
</div>
</body>
</html>
AngularJS part
This part consists of app.js and renderingController.js files located in “/Scripts/app” project folder.
app.js - contains the code needed to configure our app’s module that depends on renderingControllermodule that performs the actual interaction with our Web API methods.
var mainApp = angular.module('mainApp', ['renderingController']);
renderingController.js - contains the code for pageByPageRenderingController object which implements the methods referenced in UI template, e.g. setup(),loadFile() etc. The complete code for this controller can be found in corresponding sample project and downloaded from our GitHubrepo.
Results
We kept the app simple, and as it can be seen from the RenderingController’s code, we didn’t use any caching and implemented page rendering using the simplest way: open the file and render the requested page for every request.
The image shown below demonstrates the resulting PDF viewer single page application:
 |
Pic. 3 PDF Viewer single page app |
Conclusion
If you plan to implement your web app as a single page app and need to integrate PDF preview or PDF processing capabilities, then Apitron’s .NET PDF components such as Apitron PDF Rasterizer or Apitron PDF Kit can be easily employed to achieve the best results.
In this article we have shown how to implement basic pdf preview, but it’s also possible to implement full featured pdf viewer with loading of the document bookmarks, support for internal navigation, and so on. You can also read and create document fields, create PDF forms, extract text, sign documents and do whatever you want with them using our PDF components.
If you have any questions regarding our products, just let us know and we’ll be happy to answer them.