نمایش دهنده PDF با استفاده از FlexPaper
دوشنبه 14 اردیبهشت 1394در این مقاله نمایش دهنده 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>
- ASP.net
- 2k بازدید
- 5 تشکر