نمایش دهنده PDF با استفاده از FlexPaper

در این مقاله نمایش دهنده PDF با استفاده از FlexPaper را پیاده سازی میکنیم

نمایش دهنده PDF با استفاده از FlexPaper

FlexPaper یک نمایش دهنده اسناد سورس باز است که راه کارآمد و موثر برای نمایش یک PDF است.ورژن کامل کد آن قابل دسترس است و پیکربندی شده به صورت مستقل و فقط نیاز به دانلود آن می باشد.

ابزار مورد استفاده :

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

من فایل های Configuration را از سورس اصلی حذف کرده و یک کلاس به نام PDFProcess.cs برای انجام پردازش های ضروری برای نمایش PDF اضافه کردم .

در صفحه 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);  
        }  
    }  

و کلاس PDFProcess  را به شکل زیر مینویسیم:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="simple_document.aspx.cs" Inherits="simple_document" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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" />
    <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>

فایل های ضمیمه