Post
Ask Question

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
  1. Flexpaper Asset Files (Images for toolbar and the UI).
  2. Pdf2json.exe (Converting pdf config to a JSON string).
  3. Mudraw.exe (Converting pdf page to Image).
  4. 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]
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="simple_document.aspx.cs"     
  2.     Inherits="simple_document" %>  
  3. <!doctype html>  
  4. <html>  
  5.   
  6.      <head>  
  7.           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  8.           <meta name="viewport" content="initial-scale=1,user-scalable=0,maximum-scale=1,width=device-width" />  
  9.           <style type="text/css" media="screen">  
  10.           html,  
  11.           body {  
  12.                height: 100%;  
  13.           }  
  14.   
  15.           body {  
  16.                margin: 0;  
  17.                padding: 0;  
  18.                overflow: auto;  
  19.           }  
  20.  
  21.           #flashContent {  
  22.                display: none;  
  23.           }  
  24.           </style>  
  25.           <link rel="stylesheet" type="text/css" href="css/flexpaper.css?r53556" />  
  26.           <script type="text/javascript" src="js/jquery.min.js?r53556"></script>  
  27.           <script type="text/javascript" src="js/jquery.extensions.min.js?r53556"></script>  
  28.           <script type="text/javascript" src="js/flexpaper.js?r53556"></script>  
  29.           <script type="text/javascript" src="js/flexpaper_handlers.js?r53556"></script>  
  30.      </head>  
  31.   
  32.      <body>  
  33.           <div id="documentViewer" class="flexpaper_viewer" style="position:absolute;;width:100%;height:100%;background-color:#222222;;"></div>  
  34.           <script type="text/javascript">  
  35.           $('#documentViewer').FlexPaperViewer({  
  36.                config: {  
  37.                     IMGFiles: "<% =IMGFilesPath %>",  
  38.                     JSONFile: "<% =JSONFilePath %>",  
  39.                     PDFFile: "<% =PDFFilePath %>",  
  40.                     Scale: 0.6,  
  41.                     ZoomTransition: 'easeOut',  
  42.                     ZoomTime: 0.4,  
  43.                     ZoomInterval: 0.1,  
  44.                     FitPageOnLoad: true,  
  45.                     FitWidthOnLoad: false,  
  46.                     AutoAdjustPrintSize: true,  
  47.                     PrintPaperAsBitmap: false,  
  48.                     AutoDetectLinks: false,  
  49.                     FullScreenAsMaxWindow: true,  
  50.                     ProgressiveLoading: false,  
  51.                     MinZoomSize: 0.3,  
  52.                     MaxZoomSize: 5,  
  53.                     SearchMatchAll: true,  
  54.                     InitViewMode: 'Portrait',  
  55.                     RenderingOrder: 'html5,html5',  
  56.                     StartAtPage: 1,  
  57.                     MixedMode: true,  
  58.                     EnableWebGL: false,  
  59.                     PublicationTitle: '',  
  60.                     ViewModeToolsVisible: true,  
  61.                     ZoomToolsVisible: true,  
  62.                     NavToolsVisible: true,  
  63.                     CursorToolsVisible: true,  
  64.                     SearchToolsVisible: true,  
  65.                     UIConfig: 'UIConfig.xml?r53556',  
  66.                     WMode: 'transparent',  
  67.                     key: '#V2ZzfWBFX1pcQRhwB0lFXlVeYw',  
  68.                     localeChain: 'en_US'  
  69.                }  
  70.           });  
  71.           var url = window.location.href.toString();  
  72.           if (location.length == 0) { url = document.URL.toString(); }  
  73.           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>"); }  
  74.           </script>  
  75.      </body>  
  76.   
  77. </html> 
[simple_document.aspx.cs]
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.IO;    
  4. using System.Linq;    
  5. using System.Web;    
  6. using System.Web.UI;    
  7. using System.Web.UI.WebControls;    
  8. public partial class simple_document: System.Web.UI.Page    
  9. {    
  10.     public string IMGFilesPath = "";    
  11.     public string JSONFilePath = "";    
  12.     public string PDFFilePath = "";    
  13.     protected void Page_Load(object sender, EventArgs e)    
  14.     {    
  15.         // Set the Docs Path where the processed files will be stored     
  16.         string uploadFolderAbsPath = Server.MapPath("~/docs/");    
  17.         string uploadFolderRelPath = ResolveUrl("~/docs/");    
  18.         // Set the PDF Source Path and filename     
  19.         string sourceFilePath = Server.MapPath("~/pdf/");    
  20.         string sourceFileName = "Paper.pdf";    
  21.         IMGFilesPath = uploadFolderRelPath + sourceFileName + "_{page}.png";    
  22.         JSONFilePath = uploadFolderRelPath + sourceFileName + ".js";    
  23.         PDFFilePath = uploadFolderRelPath + Path.GetFileNameWithoutExtension(sourceFileName) + "_[*,0].pdf";    
  24.         PDFProcess pdfProcess = new PDFProcess();    
  25.         //Convert PDF to Images     
  26.         pdfProcess.PDF2Image(uploadFolderAbsPath, sourceFilePath, sourceFileName);    
  27.         //Convert PDF to JSON     
  28.         pdfProcess.PDF2JSON(uploadFolderAbsPath, sourceFilePath, sourceFileName);    
  29.         // Split PDF Pages     
  30.         pdfProcess.SplitPDF(uploadFolderAbsPath, sourceFilePath, sourceFileName);    
  31.     }    
  32. }   
The main processing Class [PDFProcess.cs]
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Web;    
  5. using System.IO;    
  6. /// <summary>     
  7. /// Summary description for PDF2Image     
  8. /// </summary>     
  9. public class PDFProcess    
  10. {    
  11.     public int PDF2Image(string uploadFolder, string sourceFilePath, string sourceFileName) {    
  12.         System.Diagnostics.Process proc = new System.Diagnostics.Process();    
  13.         proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/mudraw.exe");    
  14.         proc.StartInfo.UseShellExecute = false;    
  15.         proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;    
  16.         proc.StartInfo.CreateNoWindow = true;    
  17.         proc.StartInfo.Arguments = "-r100 -o " + "\"" + uploadFolder + sourceFileName + "_%d.png\" " + "\"" + sourceFilePath + sourceFileName + "\"";    
  18.         if (proc.Start())     
  19.         {    
  20.             proc.WaitForExit();    
  21.             proc.Close();    
  22.             return 1;    
  23.         } else return 2;    
  24.     }    
  25.     public int PDF2JSON(string uploadFolder, string sourceFilePath, string sourceFileName) {    
  26.         System.Diagnostics.Process proc = new System.Diagnostics.Process();    
  27.         proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/pdf2json.exe");    
  28.         proc.StartInfo.UseShellExecute = false;    
  29.         proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;    
  30.         proc.StartInfo.CreateNoWindow = true;    
  31.         proc.StartInfo.Arguments = "\"" + sourceFilePath + sourceFileName + "\" -enc UTF-8 -compress " + "\"" + uploadFolder + sourceFileName + ".js" + "\"";    
  32.         if (proc.Start())    
  33.         {    
  34.             proc.WaitForExit();    
  35.             proc.Close();    
  36.             return 1;    
  37.         } else return 2;    
  38.     
  39.     }    
  40.     public int SplitPDF(string uploadFolder, string sourceFilePath, string sourceFileName) {    
  41.         System.Diagnostics.Process proc = new System.Diagnostics.Process();    
  42.         proc.StartInfo.FileName = HttpContext.Current.Server.MapPath("~/bin/pdftk.exe");    
  43.         proc.StartInfo.UseShellExecute = false;    
  44.         proc.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;    
  45.         proc.StartInfo.CreateNoWindow = true;    
  46.         proc.StartInfo.Arguments = "\"" + sourceFilePath + sourceFileName + "\" burst output " + "\"" + uploadFolder + Path.GetFileNameWithoutExtension(sourceFileName) + "_%1d.pdf" + "\" compress";    
  47.         if (proc.Start())    
  48.         {    
  49.             proc.WaitForExit();    
  50.             proc.Close();    
  51.             return 1;    
  52.         } else return 2;    
  53.     }    
  54. }   
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.


Similar Articles