Viewing PDFs In Flex Paper

Introduction

This BOK throws light on rendering PDFs in browser using FlexPaper. Here I have used Spring 3 framework for creating the web application.
The author assumes that the reader has basic understanding of Spring MVC, J2EE and FlexPaper.

About FlexPaper

FlexPaper is a web-based open source document viewer which is used to view PDF files independent of PDF reader installation in the system. FlexPaper is available in both GPLV3 license and commercial license. Commercial license removes the embedded FlexPaper logo from the viewer. FlexPaper was developed by Devaldi Ltd.
FlexPaper can load very large documents/books with ease. It offers lot of functionalities like Searching, Printing, Zooming, Highlighting Text, Full Screen mode, Select/Copy text, Customizable toolbar etc.,. More Information about FlexPaper can be seen in its website.
http://flexpaper.devaldi.com

Flexpaper document viewer can display only Flash content. Hence to view a PDF in Flexpaper, We need to convert the PDF to a flash file (SWF). This transformation can be done using any external tools. Here we have used PDF2SWF software to achieve this.
I hereby declare that this document is written based on my personal experience while working on FlexPaper during my project. It does not contain any material that violates the copyright or rule of any other person of any organization. If you find any information in this document to be wrong, kindly let me know so that I can correct it with right information.

Project Structure

Snapshot of the project structure is given below. This is a custom created Spring MVC project structure.

1

Prerequisites

 

The following steps need to be followed for rendering the PDF in browser using FlexPaper.

  • Creating the view (JSP)
  • Creating the Controller Class
  • Installing pdf2swf Software
  • Converting PDF to SWF
  • Output

 

Creating the view (JSP)

  • The first step here is to create the view, in this case the JSP file that will contain the FlexPaper viewer.
  • Create Flexpaper.jsp and place it under pages folder which is in WEB-INF.
  • This page will serve as the view from where the PDF will be rendered into Flexpaper document viewer.
  • Since most of the components of FlexPaper are supported by jQuery, we need to include jQuery files in the JSP.
<% String home = "/Flexpaper/"; %>
<%-- Framework component: jQuery v1.8.3 --%>
http://%=home%static/frameworks/jquery/jquery-1.8.3.js

http://%=home%static/frameworks/jquery/jquery.rule.js
  • Next step is adding all the flexpaper related files in the JSP.
<!-- FlexPaper -->
http://%=home%static/frameworks/flexpaper/js/flexpaper.js
http://%=home%static/frameworks/flexpaper/js/flexpaper_handlers.js
http://%=home%static/frameworks/flexpaper/js/FlexPaperViewer.js
http://%=home%static/frameworks/flexpaper/js/pdf.min.js
http://%=home%static/frameworks/flexpaper/js/flexpaper_flash.js
  • After including all the necessary Flexpaper files, the next step is to create the DIV element that will be the place holder for the viewer.
  • To uniquely identify this DIV element, it should be given an ID. Here the ID given is “documentViewer”. This ID should be passed as parameter to the flexpaper config method at the time of initialization.
  • The next step is to call the config method of FlexPaper to initialize the document viewer.
  • The config method takes a number of parameters as its arguments by which we can configure the viewer the way we would want. Like for e.g. enabling print, disabling zooming etc.
  • Calling the config method is simple as calling a function in JavaScript. To do this, in the Flexpaper.jsp create a script tag and place the below code.
var fp = new FlexPaperViewer(	
		 'FlexPaperViewer',
		 'documentViewer', { config : {
		 
		 SwfFile : "static/SWF/SAMPLE.swf",
		 jsDirectory: 'js/',
		 Scale : 0.6, 
		 ZoomTransition : 'easeOut',
		 FitPageOnLoad : true,
		 FitWidthOnLoad : false,
		 FullScreenAsMaxWindow : false,
		 MinZoomSize : 0.2,
		 MaxZoomSize : 5,
		 InitViewMode : 'Portrait',
		 ZoomToolsVisible : false,
		 SearchToolsVisible : false,
}});

Here,

documentViewer : The DIV which will be the place holder for the viewer
SwfFile : The SWF document that should be opened by the viewer.
jsDirectory : Locates the directory where Flexpaper JS files are kept
Scale : Specifies the percent of initial zoom level on the document.
ZoomTransition : The effect to be used while zooming. The default is easeOut. Other examples are easenone, easeoutquad, linear, easeout.
FitPageOnLoad : Set to true, Fits the page on document initial loading.
FitWidthOnLoad : Set to true, Fits the width of document on initial loading.
FullScreenAsMaxWindow : Set to true, on clicking the full screen button in the toolbar, document will open in Full screen in a new tab in the browser.
MinZoomSize : Sets the minimum allowed zoom level
MaxZoomSize : Sets the maximum allowed zoom level
InitViewMode : Sets the initial view type. “Portrait”, “TwoPages” are the options
ZoomToolsVisible : Shows or hides the zoom tools from tool bar
SearchToolsVisible : Shows or hides the search tools from tool bar
 
  • Still there are lots of parameters that can be set while initializing the Flexpaper. They can be seen in the following link.

http://www.flexpaper.devaldi.com/docs_parameters.jsp

Creating the Controller Class

  • Create FlexpaperController.java and place it under com.controller package.
  • This class serves as the Controller class.
@Controller
public class FlexpaperController {

	@RequestMapping(value = "/")
	public ModelAndView handleRequestInternal(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

	ModelAndView model = new ModelAndView("Flexpaper");
		
	ServletContext context = request.getSession().getServletContext();
        String path = context.getRealPath("/") + CommonConstants.STATIC_PATH;
		
	new pdf2swfUtil().convertpdf2swf(path);
		
	return model;
}}

Here

  • A new model object is created with parameter “Flexpaper”. Controller uses the class in org.springframework.web.servlet.view.InternalResourceViewResolver to route the corresponding view. In our case it is Flexpaper.jsp
  • Here, handleRequestInternal will be the default method for all the requests as the @RequestMapping is configured here as “/”.
  • In our application, the PDF to be viewed in Flexpaper viewer will be kept in static/PDF folder. We are using Servlet Context to get the desired path of the PDF.
  • The obtained path is sent to another utility class which converts the PDF to SWF.
  • Constants are fetched from an interface, which is given below.
package com.controller;

public interface CommonConstants {

	String MASTER_PAGE = "MasterPage";

        String COMMAND = " \"C:\\Program Files\\SWFTools\\pdf2swf.exe\" 
                         {path.pdf}{pdffile} -o {path.swf}{swffile} 
                         -f -T 9 -t -s storeallcharacters";

	String PDF_NAME = "SAMPLE.pdf";
	String PDF_PATH = "PDF\\";
	String SWF_PATH = "SWF\\";
	String SEPERATOR = "\\";
	String STATIC_PATH = "static";
	
}
  • Here COMMAND contains the necessary command to be executed to convert the PDF to SWF.

 

Installing pdf2swf Software

To convert the PDF to SWF we need to download pdf2swf converter software.

image2

  • To convert a PDF to SWF, we need to first open that PDF using, File à Open PDF

image3.jpg

 

Converting PDF to SWF

  • After opening the necessary PDF to convert it into SWF, we should click on File à Save SWF.
  • Clicking on this will convert the required PDF to SWF in our desired location.
  • Now we have to call this pdf2swf software from our application to convert the PDF present in static/PDF to static/SWF location.
  • As Flexpaper can load only SWF files, it will read the file from the location static/SWF and render the PDF in its document viewer.
  • To achieve this, we make use of the following utility class.
public boolean convertpdf2swf(String filePath) {

boolean conversion = false;
	try{

String command = CommonConstants.COMMAND;
String swfFile	= CommonConstants.PDF_NAME.replace(".pdf", ".swf");
String pdfFilePath = filePath + CommonConstants.SEPERATOR;
			
command = command.replace("{path.pdf}", pdfFilePath + CommonConstants.PDF_PATH);

command = command.replace("{path.swf}", pdfFilePath + CommonConstants.SWF_PATH); 

command = command.replace("{pdffile}", CommonConstants.PDF_NAME);

command = command.replace("{swffile}", swfFile);
			
conversion = exec(command);

}catch(Exception e){
	e.printStackTrace();
}
	return conversion;
}

Here, CommonConstants.COMMAND corresponds to the below give code.

String COMMAND = " \"C:\\Program Files\\SWFTools\\pdf2swf.exe\" 
                 {path.pdf}{pdffile} -o {path.swf}{swffile} -f -T 9 -t -s 
                 storeallcharacters";

Before executing the command from Java, the following parameters will have to be set.

  • The above highlighted location is the installation path of pdf2swf software. This should be updated according to its location.
  • {path.pdf} should contain the location of the PDF to be converted. Here it is “/PDF”.
  • {pdffile} is the name of the PDF file. Here it is “SAMPLE.pdf”.
  • {path.swf} should contain the destination of the converted SWF. Here it is “/SWF”.
  • {swffile} is the name of the converted SWF file. Here it is “SAMPLE.swf”.
  • To execute this command, the following method should be invoked.
public boolean exec(String execString){

try {

		Process p = Runtime.getRuntime().exec(execString);
                BufferedReader is = new BufferedReader
(new InputStreamReader(p.getInputStream( )));
                String line;
		while ((line = is.readLine( )) != null){
			if(line.toLowerCase().startsWith("error"))
				return false;
		}
		try {
			p.waitFor();
		} catch (InterruptedException e) {
			return false;
		}
	} catch (IOException e) {
		e.printStackTrace();
		return false;
	}
	return true;
}
  • The above method invokes the pdf2swf software from java with the necessary parameters i.e. the PDF to be converted and the location for SWF.
  • When flexpaper initializes, we have mentioned to pick up the SWF file present in static/SWF location and hence the SWF will be rendered inside the Flexpaper as follows in the browser.

OUTPUT

image4.jpg

 

References

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s