PDF Viewer Using FlexPaper

Julian
May 01, 2015
14.4k
0
0
Article

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;
}
}