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>
  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. }
  15. body {
  16. margin: 0;
  17. padding: 0;
  18. overflow: auto;
  19. }
  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>
  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>
  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;
  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.