仿百度文库解决方案(五)-flexpaper实现文档的在线预览

来源:互联网 发布:淘宝土鸡蛋怎么上架 编辑:程序博客网 时间:2024/03/29 02:49

            在把文档的格式转换成swf格式以后,现在该实现在线的预览。 在线预览的方法有两种方式。 第一种: 通过flashpaper实现文档的在线预览。第二种是通过flexpaper实现文档的在线预览。 在博客中用到的是第二种方法。 在这里我们来了解一下是什么是flexpaper。

     1  Flexpaper的简介

     FlexPaper是一个被设计用来与PDF2SWF一起使用,开源轻量级的在浏览器上显示各种文档的组件, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。也可以通过将一些例如Word、PPT等文档转成PDF,然后实现在线浏览。

      本文用到的flexpaper的版本是:FlexPaper_1.4.5_flash,

     下载的地址:http://download.csdn.net/download/yali1990515/4443796

      下载之后直接加压就可以了,下面是解压之后的文件截图:

      

    

      主要文件,文件夹说明:

  • examples文件夹:存放FlexPaper使用的例子

  • js文件夹:存放FlexPaper调用的js文件

  • php文件夹:存放php使用FlexPaper的例子

  • index.html:例子主页

  • FlexPaperViewer.swf:FlexPaper的核心文件

  • playerProductInstall.swf:如果客户端浏览器的flashplayer版本过低,将嵌入此swf文件

        2 Flexpaper的参数含义

            
  • SwfFile (String)需要使用Flexpaper打开的文档

    Scale (Number)初始化缩放比例,参数值应该是大于零的整数

    ZoomTransition (String) Flexpaper中缩放样式,它使用和Tweener一样的样式,默认参数值为easeOut.其他可选值包括: easenone, easeout, linear, easeoutquad

    ZoomTime (Number)从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。

    ZoomInterval (Number)缩放比例之间间隔,默认值为0.1,该值为正数。

    FitPageOnLoad (Boolean)初始化得时候自适应页面,与使用工具栏上的适应页面按钮同样的效果。

    FitWidthOnLoad (Boolean)初始化的时候自适应页面宽度,与工具栏上的适应宽度按钮同样的效果。

    localeChain (String)设置地区(语言),目前支持以下语言。

        en_US (English)

        fr_FR (French)

        zh_CN (Chinese, Simple)

        es_ES (Spanish)

        pt_BR (Brazilian Portugese)

        ru_RU (Russian)

        fi_FN (Finnish)

        de_DE (German)

        nl_NL (Netherlands)

        tr_TR (Turkish)

        se_SE (Swedish)

        pt_PT (Portugese)

        el_EL (Greek)

        da_DN (Danish)

        cz_CS (Czech)

        it_IT (Italian)

        pl_PL (Polish)

        pv_FN (Finnish)

        hu_HU (Hungarian)

    FullScreenAsMaxWindow (Boolean)当设置为true的时候,单击全屏按钮会打开一个flexpaper最大化的新窗口而不是全屏,当由于flash播放器因为安全而禁止全屏,而使用flexpaper作为独立的flash播放器的时候设置为true是个优先选择。

    ProgressiveLoading (Boolean)当设置为true的时候,展示文档时不会加载完整个文档,而是逐步加载,但是需要将文档转化为9以上的flash版本(使用pdf2swf的时候使用-T 9 标签)。

    MaxZoomSize (Number)设置最大的缩放比例。

    MinZoomSize (Number)最小的缩放比例。

    SearchMatchAll (Boolean)设置为true的时候,单击搜索所有符合条件的地方高亮显示。

    InitViewMode (String)设置启动模式如"Portrait" or "TwoPage".

    ViewModeToolsVisible (Boolean)工具栏上是否显示样式选择框。

    ZoomToolsVisible (Boolean)工具栏上是否显示缩放工具。

    NavToolsVisible (Boolean)工具栏上是否显示导航工具。

    CursorToolsVisible (Boolean)工具栏上是否显示光标工具。

    SearchToolsVisible (Boolean)工具栏上是否显示搜索

     
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
            3 flexpaper的使用例子
        
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>文档显示页面</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css" media="screen">html,body {height: 100%;}body {margin: 0;padding: 0;overflow: auto;}#flashContent {display: none;}</style><script type="text/javascript" src="js/flexpaper_flash.js"></script></head><body><div><br/><Br/><br/></div><div style="position:absolute;left:200px;top:10px;">        <a id="viewerPlaceHolder" style="width:650px;height:700px;display:block"></a>                <script type="text/javascript">     var fp = new FlexPaperViewer( 'FlexPaperViewer', 'viewerPlaceHolder', { config : { SwfFile : escape('http://localhost:8080/Test/swf/1.swf'), Scale : 0.8,  ZoomTransition : 'easeOut', ZoomTime : 0.5, ZoomInterval : 0.2, FitPageOnLoad : true, FitWidthOnLoad : false, PrintEnabled : false, FullScreenAsMaxWindow : false, ProgressiveLoading : true, MinZoomSize : 0.2, MaxZoomSize : 5, SearchMatchAll : false, InitViewMode : 'Portrait',  ViewModeToolsVisible : true, ZoomToolsVisible : true, NavToolsVisible : true, CursorToolsVisible : true, SearchToolsVisible : true,     localeChain: 'zh_CN' }});        </script>        </div></body></html>
           在这里的测试的时候把页面建在了于flexpaper的根目录下,这样只是为了方便测试,不是一定要放在同一个目录下。下面是文件放在的位置和效果预览图。
        
           效果图:
          
 
 
             页面显示的效果是因为在pdf转换时出现的乱码,在这里不处理,下一篇博客会针对乱码的处理。
 
 
 
 
 
 
 
 
 
原创粉丝点击