Display Documents on mobile, tablet and desktop

The world’s most flexible document viewing solution

Download Trial Request a quote

How to run JPDF2HTML5 on the Microsoft Azure Cloud

This tutorial explains how to setup the IDRsolutions JPDF2HTML5 converter or the JPDFForms converter on a Cloud service with a simple example. Both products utilize the same api and will be interchangable in the web application that we will create. The only difference will be which jar file you will use. This application will let you upload a file, convert that file into a HTML page and then will provide a link so that you can see the HTML page. It will be using the JPDF2HTML5-trial.jar which you candownload here or the JPDFForms trial jar which you can request from here.

What you will need to have done before you start:

  • Completed my previous tutorial: ‘How to use the Microsoft Azure cloud on the NetBeans IDE’ to set up your Azure account and create a web application instance on a Tomcat server. We will deploy a WAR file to this instance later so you need to have these steps completed before starting this tutorial. The previous tutorial will also show you how to set up NetBeans in order to test your application locally before you deploy it.
  • Downloaded either the JPDF2HTML5 trial jar fromhere or requested the JPDFForms trial jar from here

Create a new project

First lets create a Web application in NetBeans. Right click in your Projects window and select New Project. Then choose the Java Web categories Web Application project. Click Next and give the project a meaningful name like PDF2HTML5Converter.

1

On the Server and Settings screen you should select your Tomcat server that you created in the previous tutorial. Java EE should be set to version 7. Select Finish.

serverAndSettings

You should get a project that’s structure resembles this:

projectStructure

At this point you can run your application to ensure it is set up and will correctly deploy. You can do this by right clicking the top-most node of your project and clicking Run.

Create index.jsp

Index.jsp lives in the Web Pages directory, which is where files should be placed if you want clients to be able to access them via their web browsers. Index.jsp will display a HTML form on the client’s computer, which will let you select a file and upload it to a servlet. The servlet works on the server’s machine and does all of the heavy work so that the client machine can just sit back and wait for it’s file to be converted. If you have an index.html then delete this so your index.jsp is always used as the default web page upon starting your application.
 
You also need to add a form with two elements: File and Submit. Your file should be given an ID as “pdfFile”. This is important because later on the servlet will use this ID to extract the file from the form request.
 
The form will post to a servlet called PDF2HTML5Converter and we will create that in the next step.

Your index file should look like this:

Create the servlet / PDF2HTML5Converter

At the end of this tutorial I will post the full code for this class. Those of you who feel fairly competent with web applications can just skip down there to browse the code. Everyone else can use the code as a quick reference to make sure they are on the right track.

Your servlet should be created and stored in the Source Packages directory since it is essentially a Java class. To create this right click your Source Packages directory, go to the New menu and select the Other menu item. This will open the New File wizard. Choose from the Web category a Servlet file type. Click Next, name your servlet “PDF2HTML5Converter” and click Next again.

servletFileType

On the Configure Servlet and Deployment step tick Add information to deployment desciptor (web.xml). This will create a web.xml file for you in the WEB-INF directory and will add your servlet mapping details to it. We will discuss more on web.xml in the next step.

addInfoToWeb

As you can see servlets have some predefined methods like doPost() and processRequest(). When the servlet receives a request via the post method it’s doPost() method is called. This method calls processRequest() and passes in the HttpServletRequest and a HttpServletResponse. We can get any data that was passed along with the HttpServletRequest e.g. a file and similarly attach data to the HttpServletResponse e.g. HTML.
 

@MultipartConfig is needed to tell the servlet to expect requests conforming to the multipart/form-data MIME type (so that requests containing a file can be retrieved).
 

This class has 3 jobs so we will make 3 methods and call them in the processRequest method. Your new ProcessRequest() should look like below. We pass the request into getFile() because we need the request in order to extract the file from it. Similarlyresponse is passed into generateOutput() because that method that will carry out the download, which will be put into the response for the client.

We pass the request into getFile() because we need the request in order to extract the file from it. Similarly response is passed into generateOutput() because that method will create the output, which will be put into the response for the client.

Modify / check web.xml

I am creating a version 2.5 web application which requires a file called web.xml. This file holds the information the application needs in order to correctly find the servlet when the application is deployed. It will also let us set an URL that we will access the servlet from in the browser. Web.xml is stored in the WEB-INF folder. You will have to make a few changes or ensure that web.xml is set up correctly for your web application.

You need to check your web-app version, servlet class and your servlet mapping. The servlet-class will tell your web application which package the servlet is in and the servlet-mapping will tell the browser which URL you can access the servlet at.
Your web.xml should look like this:

Copy the PDF file to a local file on the server / getFile()

In your servlet we are going to add the first method which will copy the file to the server. You should be aware that different servers have different file systems. In this example we are using a Tomcat server both locally and on the Azure cloud. The Azure Tomcat server is run on a Linux machine while I am using a Windows 10 OS. Therefore the code we we write that accesses and uses the file system will be slighty different when I test locally and from where I will run the application – See the note below the code.

If you want to test your code locally on a Windows OS then fileOutputPath needs to be set to “../webapps/ROOT/conversions/” + sessionName; instead. Normally we would use this relative path for every machine but in order to do this you must be able to set the docroot in your server.xml file. When trying to change this on my Azure Server I kept experiencing problems and so ended up using an absolute path. You also need to locally update conf/server.xml so that your context path becomes:
<Context path=”/conversions” docBase=”/webapps/ROOT/conversions”/> in the <Host> tags.

Convert the data into a HTML page / convertPdf2Html5()

Before we can start this method we need to add the jar to the project library. If we don’t then we can’t use the functions and classes we need to convert the file into a HTML file. To add the jar, right click your project’s top most node and select Properties. Look down the category tree on the left and select Libraries. Then select the Add JAR/Folder button and navigate to your Jpdf2html5 jar OR your JPDFForms jar. Click Open and then OK.

addJar

We are using the simplest conversion with no options. We can use the example code from here to help us. Since we aren’t using any options we can just create the HTMLConversionOptions() and IDRViewerOptions() as new objects. The Converter’s convert method takes the byte[] and output file as parameters.

Display link to output / generateOutput()

Create the response that will be sent back to the client’s browser with a link to the newly generated output.

Create the WAR file

To create a WAR file go to your File view. Right click build.xml and go to Run Target and select dist. This will create a dist directory with a WAR file for your application.

warFile

Deploy and run application

If you have completed my earlier tutorial on How to use the Microsoft Azure cloud on the NetBeans IDE then you will have an Azure account set up and are running a Web application on a Tomcat server. Deploying this application is the same as in the tutorial. You create a WAR file of your project and use the Kudo application to navigate your servers file system. You then drag your WAR to site/wwwroot/bin/apache-tomcat-versionNumber/webapps (making sure you avoid the Upload and Unzip section).

Then go back to the Azure Portal and restart your server. Now navigate to your web application. I would have to navigate to http://myApp.azurewebsites.net/myProject if my web application instance on Azure was called myApp and the WAR I uploaded contained a project named myProject.

We haven’t changed the context root in our application but if you did change it before uploading your application through Kudo then just change myProject to what your current context root is. You should see a screen similar to the image below:

converterPage

Choose your file and click the convert button. Please note that large PDF sizes may cause the server to time out. If the conversion is successful your browser should display a link like below.

convertLinkPNG

After clicking the above link you will open the converted file in your browser.

8

Please take note hat there could be various issies that might occur that aren’t related to your code. For example

  • You may get a “The specified CGI application encountered an error and the server terminated the process” error if the pdf you are trying to upload has a file size that is too big and is timing out the server.
  • You may get a “Server error page” which may be caused by your browsers cookies settings. One possible solution may be to clear your browsers cookies. This could be caused by many different issues though.

Complete PDF2HTML5Converter code

IDRSolutions Limited 1999-2016