How To Integrate / Deploy an HTML5 PDF Viewer on your Web Application Server

This knowledge base entry is detailing the technical steps to integrate an HTML5 viewer on your website and web application server using  Qoppa’s library jPDFWeb.

Before getting into technical details, we recommend that you read our knowledge base entry Understanding how a zero footprint HTML5 viewer works, a good introduction to what is being done here.

Web Viewer Installation and Configuration

This page explains how to setup a servlet that uses  Qoppa’s library jPDFWeb to convert PDF documents to SVG and then serve them to the client in HTML.

You will need a web application server (ex. Apache Tomcat).

In this sample, PDF files are located in a pre-configured folder on the server.

pdfhtml5viewer_workflow_svg

Server-Side Installation & Configuration for the Web Viewer

  1. Ensure that you have installed your application server software. (ex. Tomcat, Jetty, JBoss, etc…). Refer to the documentation of your specific server application to complete this step.
  2. Establish / Create a directory on your server for the jPDFWeb config file (i.e c:\PDFWeb).
  3. Establish/Create 2 additional directories within the directory from step 2 on your server for the below items.
    1. PDF Files: Will contain the PDF files you want served to the viewer (i.e c:\PDFWeb\PDF Files).
    2. PDF Uploads: Will contain the PDF files uploaded to the viewer (i.e c:\PDFWeb\PDF Uploads).
  4. Edit supplied PDFToSVG-options.xml file (located in the directory where the jPDFWeb Sample app was installed under the folder called “WebViewerSamples” ) and save this file to the server in the directory created in step 2.
    1. Add your jPDFWeb license key to run in production mode. If you do not have a key, jPDFWeb will run in demo mode.
    2. Update the PDF Files directory and the PDF Uploads directory to the locations of your directories created in step 3.
  5. Set the PDFWEB_CONFIG Java System Property for the application server to point to the server’s PDFToSVG-options.xml file that you just created. You may be required to restart the application server in order for the setting to be applied.
  6. Deploy the PDFToSVG.war file to the application server.  This may be done with the application server’s manager or by copying the PDFToSVG.war file to the documented location on the server.
  7. Run any of the servlets within that web app.  A suggested starting point is to run the PDFList servlet. See for instance: http://pdfweb.qoppa.com:8080/PDFToSVG/PDFList. The URL will depend on how you setup your server but the format is as follows: http://{host}/{web app name}/{servlet name} where:
    • {host} is the web app server name  (Ex.  pdfweb.qoppa.com:8080, localhost:8080 or qsvg:8080)
    • {web app name} is the deployed web app name – comes from the .WAR file name. (You can rename the .war before deploying to get a different web app name…)
    • {servlet name} specifies which servlet to run:
    • PDFList:  creates a web page that lists all of PDF files in the “download” directory with the appropriate. Click on a file to open any PDF files in the HTML5 PDF viewer frame.

     

Client Call

To display the converted SVG files to the client, call one of the Java servlets provided by Qoppa Software to either:

  • Serve a whole PDF document as HTML
  • Serve a PDF document page by page within an AJax viewer

1. Whole PDF Document as HTML

Make a call to the servlet function called “DocToHTML” and pass on the name of the PDF document to convert:

http://pdfweb.qoppa.com:8080/PDFToSVG/DocToHTML?pdf=emory_rollins_school.pdf

This approach has the following advantages:

  • Browsers are very efficient are rendering the pages as they are downloaded and made available to the client.
  • Allows searching through the whole document
  • Allows sending the whole document to the printer


2. Page by Page Ajax Viewer

Make a call to the servlet function called “PDFFrame” and pass on the name of the PDF document to convert:

http://pdfweb.qoppa.com:8080/PDFToSVG/PDFFrame?pdf=emory_rollins_school.pdf

Qoppa provides the source code for qViewer.js, a simple AJAX SVG Web Viewer. It uses jquery, a JavaScript library, that simplifies the client-side scripting of HTML)  and Ajax that makes it possible to send data to and retrieve from a server in the background without interfering with the display and behavior of the existing page.

This viewer has the following advantages:

  • Tested on most browsers and platforms
  • Uses AJAX to request SVG for each page
  • Allows for zoom, pan and rotate of SVG pages

Developers are free to customize the viewer to their specific needs.

Distribution

PDFToSVG.war – Web archive for servlet-based AJAX viewer (with source code)

Contact us with any questions.

Tagged: