PDF Viewer Using FlexPaper

About FlexPaper

Flexpaper is an open-source web-based document viewer.

Link: Devaldi

It provides an efficient and fancy way to view a PDF.

The complete version of the code is available at [ Zine Servertrial ].

It must be configured as well as all the standalone exe's used must be downloaded.

Minimizing the Code

I minimized and deleted all the files except what I needed for viewing the PDF.

Tools Used

Flexpaper Asset Files (Images for toolbar and the UI).
Pdf2json.exe (Converting pdf config to a JSON string).
Mudraw.exe (Converting pdf page to Image).
Pdftk.exe (Splitting the PDF).

I removed the Configuration Files from the original source and added a class called PDFProcess.cs to do the required process of viewing the PDF.

The website Structure

The Startup File [simple_document.aspx]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="simple_document.aspx.cs"
Inherits="simple_document" %>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1,user-scalable=0,maximum-scale=1,width=device-width" />
<style type="text/css" media="screen">
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: auto;
}
#flashContent {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="css/flexpaper.css?r53556" />
<script type="text/javascript" src="js/jquery.min.js?r53556"></script>
<script type="text/javascript" src="js/jquery.extensions.min.js?r53556"></script>
<script type="text/javascript" src="js/flexpaper.js?r53556"></script>
<script type="text/javascript" src="js/flexpaper_handlers.js?r53556"></script>
</head>
<body>
<div id="documentViewer" class="flexpaper_viewer" style="position:absolute;;width:100%;height:100%;background-color:#222222;;"></div>
<script type="text/javascript">
$('#documentViewer').FlexPaperViewer({
config: {
IMGFiles: "<% =IMGFilesPath %>",
JSONFile: "<% =JSONFilePath %>",
PDFFile: "<% =PDFFilePath %>",
Scale: 0.6,
ZoomTransition: 'easeOut',
ZoomTime: 0.4,
ZoomInterval: 0.1,
FitPageOnLoad: true,
FitWidthOnLoad: false,
AutoAdjustPrintSize: true,
PrintPaperAsBitmap: false,
AutoDetectLinks: false,
FullScreenAsMaxWindow: true,
ProgressiveLoading: false,
MinZoomSize: 0.3,
MaxZoomSize: 5,
SearchMatchAll: true,
InitViewMode: 'Portrait',
RenderingOrder: 'html5,html5',
StartAtPage: 1,
MixedMode: true,
EnableWebGL: false,
PublicationTitle: '',
ViewModeToolsVisible: true,
ZoomToolsVisible: true,
NavToolsVisible: true,
CursorToolsVisible: true,
SearchToolsVisible: true,
UIConfig: 'UIConfig.xml?r53556',
WMode: 'transparent',
key: '#V2ZzfWBFX1pcQRhwB0lFXlVeYw',
localeChain: 'en_US'
}
});
var url = window.location.href.toString();
if (location.length == 0) { url = document.URL.toString(); }
if (url.indexOf("file:") >= 0) { jQuery('#documentViewer').html("<div style='position:relative;background-color:#ffffff;width:420px;font-family:Verdana;font-size:10pt;left:22%;top:20%;padding: 10px 10px 10px 10px;border-style:solid;border-width:5px;'><img src='data:image/gif;base64,R0lGODlhEAAPAMQPAPS+GvXAIfrjnP/89vnZePrhlvS9F//+/PrfjfS/HfrgkPS+GP/9+YJiACAYAP////O3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAA8ALAAAAAAQAA8AAAVQ4COOD0GQKElA0JmSg7EsxvCOCMsi9xPrkNpNwXI0WIoXA1A8QgCMVEFn1BVQS6rzGR1NtcCriJEAVnWJrgDI1gkehwD7rAsc1u28QJ5vB0IAOw%3D%3D'><b>You are trying to use FlexPaper from a local directory.</b><br/><br/> Use the 'View in browser' button in the Desktop Publisher publish & preview dialog window to preview your publication or copy the contents of your publication directory to a web server and access this html file through a http:// url.</div>"); }
</script>
</body>
</html>

[simple_document.aspx.cs]

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class simple_document: System.Web.UI.Page
{
public string IMGFilesPath = "";
public string JSONFilePath = "";
public string PDFFilePath = "";
protected void Page_Load(object sender, EventArgs e)
{
// Set the Docs Path where the processed files will be stored
string uploadFolderAbsPath = Server.MapPath("~/docs/");
string uploadFolderRelPath = ResolveUrl("~/docs/");
// Set the PDF Source Path and filename
string sourceFilePath = Server.MapPath("~/pdf/");
string sourceFileName = "Paper.pdf";
IMGFilesPath = uploadFolderRelPath + sourceFileName + "_{page}.png";
JSONFilePath = uploadFolderRelPath + sourceFileName + ".js";
PDFFilePath = uploadFolderRelPath + Path.GetFileNameWithoutExtension(sourceFileName) + "_[*,0].pdf";
PDFProcess pdfProcess = new PDFProcess();
//Convert PDF to Images
pdfProcess.PDF2Image(uploadFolderAbsPath, sourceFilePath, sourceFileName);
//Convert PDF to JSON
pdfProcess.PDF2JSON(uploadFolderAbsPath, sourceFilePath, sourceFileName);
// Split PDF Pages
pdfProcess.SplitPDF(uploadFolderAbsPath, sourceFilePath, sourceFileName);
}
}

The main processing Class [PDFProcess.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
/// <summary>
/// Summary description for PDF2Image
/// </summary>
public class PDFProcess
{
public int PDF2Image(string uploadFolder, string sourceFilePath, string sourceFileName) {
System.Diagnostics.Process proc = new System.Diagnostics.Process();
proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/mudraw.exe");
proc.StartInfo.UseShellExecute = false;
proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
proc.StartInfo.CreateNoWindow = true;
proc.StartInfo.Arguments = "-r100 -o " + "\"" + uploadFolder + sourceFileName + "_%d.png\" " + "\"" + sourceFilePath + sourceFileName + "\"";
if (proc.Start())
{
proc.WaitForExit();
proc.Close();
return 1;
} else return 2;
}
public int PDF2JSON(string uploadFolder, string sourceFilePath, string sourceFileName) {
System.Diagnostics.Process proc = new System.Diagnostics.Process();
proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/pdf2json.exe");
proc.StartInfo.UseShellExecute = false;
proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
proc.StartInfo.CreateNoWindow = true;
proc.StartInfo.Arguments = "\"" + sourceFilePath + sourceFileName + "\" -enc UTF-8 -compress " + "\"" + uploadFolder + sourceFileName + ".js" + "\"";
if (proc.Start())
{
proc.WaitForExit();
proc.Close();
return 1;
} else return 2;
}
public int SplitPDF(string uploadFolder, string sourceFilePath, string sourceFileName) {
System.Diagnostics.Process proc = new System.Diagnostics.Process();
proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/pdftk.exe");
proc.StartInfo.UseShellExecute = false;
proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
proc.StartInfo.CreateNoWindow = true;
proc.StartInfo.Arguments = "\"" + sourceFilePath + sourceFileName + "\" burst output " + "\"" + uploadFolder + Path.GetFileNameWithoutExtension(sourceFileName) + "_%1d.pdf" + "\" compress";
if (proc.Start())
{
proc.WaitForExit();
proc.Close();
return 1;
} else return 2;
}
}

The output

Using the Source Code

Download the source code and open it as a Web Site. Set the [simple_document.aspx] as the Startup File and run.

9 Comments

Join the conversation! Your thoughts help the community grow.

Vivek Ilaveni4y ago
Missing some files from zip
Subash10y ago
Nice share sir
vasu vasu10y ago
please upload all files
Dau Jee11y ago
Missing some files from the zip?
Stein Høiem11y ago
missing some files from the zip?
Karthik Muthu Karuppan11y ago
nice
Manoj Kulkarni11y ago
Thank you for sharing the information
Nitin11y ago
nice
Santhakumar Munuswamy11y ago
Good Work