flexpaper实现文档的在线预览

在把文档的格式转换成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的使用例子
        
[html]  view plain copy print ?
  1. <span style="color:#009900;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8.   
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  10. <html>  
  11.     <head>  
  12.   
  13.   
  14.         <title>文档显示页面</title>  
  15.   
  16.         <meta http-equiv="pragma" content="no-cache">  
  17.         <meta http-equiv="cache-control" content="no-cache">  
  18.         <meta http-equiv="expires" content="0">  
  19.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  20.         <meta http-equiv="description" content="This is my page">  
  21.         <!-- 
  22.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  23.     -->  
  24.         <style type="text/css" media="screen">  
  25. html,body {  
  26.     height: 100%;  
  27. }  
  28.   
  29. body {  
  30.     margin: 0;  
  31.     padding: 0;  
  32.     overflow: auto;  
  33. }  
  34.   
  35. #flashContent {  
  36.     display: none;  
  37. }  
  38. </style>  
  39.   
  40.         <script type="text/javascript" src="js/flexpaper_flash.js">  
  41. </script>  
  42.     </head>  
  43.   
  44.     <body>  
  45.     <div>  
  46.     <br/><Br/><br/>  
  47.     </div>  
  48.         <div style="position:absolute;left:200px;top:10px;">  
  49.             <a id="viewerPlaceHolder" style="width:650px;height:700px;display:block"></a>  
  50.               
  51.             <script type="text/javascript">  
  52.                 var fp = new FlexPaperViewer(     
  53.                          'FlexPaperViewer',  
  54.                          'viewerPlaceHolder', { config : {  
  55.                          SwfFile : escape('http://localhost:8080/Test/swf/1.swf'),  
  56.                          Scale : 0.8,   
  57.                          ZoomTransition : 'easeOut',  
  58.                          ZoomTime : 0.5,  
  59.                          ZoomInterval : 0.2,  
  60.                          FitPageOnLoad : true,  
  61.                          FitWidthOnLoad : false,  
  62.                          PrintEnabled : false,  
  63.                          FullScreenAsMaxWindow : false,  
  64.                          ProgressiveLoading : true,  
  65.                          MinZoomSize : 0.2,  
  66.                          MaxZoomSize : 5,  
  67.                          SearchMatchAll : false,  
  68.                          InitViewMode : 'Portrait',  
  69.                            
  70.                          ViewModeToolsVisible : true,  
  71.                          ZoomToolsVisible : true,  
  72.                          NavToolsVisible : true,  
  73.                          CursorToolsVisible : true,  
  74.                          SearchToolsVisible : true,  
  75.                           
  76.                          localeChain: 'zh_CN'  
  77.                          }});  
  78.             </script>  
  79.         </div>  
  80.     </body>  
  81. </html></span>  
           在这里的测试的时候把页面建在了于flexpaper的根目录下,这样只是为了方便测试,不是一定要放在同一个目录下。下面是文件放在的位置和效果预览图。
         
           效果图:
           
 

在显示的时候发现pdf转换swf格式的文件出现了乱码的问题,在这里总结一下出现的问题。

        第一个 : 在网页上显示资源时无法显示。如图:

     

         分析原因 :

              出现这种情况分为三种情况。第一种情况是在播放官方的swf的文件,这样的情况的原因是没有得到官方的信任。在官方添加信任就好。具体操作如下:

             进入官网,网址如下:http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065

  FlexPaper添加信任.进入网页之后 ,点击左边的 Global Security Settings papel 这个选项,然后在右边(如下图)

  

           第二种情况 ; 可以加载官方的案例,可是无法加载自己的资源 

         当我们想要FlexPaper加载我们自己的swf时,发现一直处于等待状态,无法显示,检查swf的路径也没错,但就是一直无法加载。这种情况,很有可能就是.swf文件的版本问题啦。我们运行SWFTools的图形工具(gpdf2swf.exe)把pdf转换为swf,但是转换后的swf也不能被Flexpaper正常加载,如果你确保路径没错的话,那就是版本的问题啦。

我们可以查看转换时swf的版本,我们可以点击 Edit->Options->Viewer:

          

可以看到它帮我们转换为SWF的版本有 7,8两项,但这都是不能正常在FlexPaper中加载的,我们必须把pdf转换为版本为9swf,才能让它在Flexpaper中显示。那么如何转换为9的呢?我自己是使用cmd命令行工具来手工转换的.只须在命令行添加 "-s flashversion=9" 这句,就可以转换为9的版本啦.示例如下:

参数说明如下:

SWFTools我的默认安装路径是: E:\Program Files\

SWFToolspdf2swf.exe工具所在的文件夹,

-t源文件路径,即待转换的pdf文件路径。

-s设置参数,这里我们设置为 flashversion=9 ,即可以转换为的版本啦。

-o输出文件的路径,这里我输出到F:盘下

好了,这样就转换成功啦,你就可以得到一个.swf的文件,你只需拷到你下载的Demo里,配置好路径后,你就会发现FlexPaper可以正常加载你的swf.

在这里稍微强调一个小问题文件夹名字带有空格

对于 -t ,-o 这两个参数,就是对于源文件路径来输出文件路径的问题,如果你的文件夹的名字中,有空格的话,这样是不能找到你的文件的。

比如说:我要转换的pdf源文件在 E:\Program Files\SWFTools\这个文件夹下,当我这样写 -t E:\Program Files\SWFTools\ajax.pdf 或者是输出文件路径写成这样 - o E:\Program Files\SWFTools\ajax.swf  这样都是不能成功的,因为这里面有文件夹名含有空格,这应该是cmd命令的问题(这个我也不是很懂,希望有高手能说一下),这里你只有在路径的前后加上又引号就能成功啦,如: -t "E:\Program Files\SWFTools\ajax.pdf" 或  -o "E:\Program Files\SWFTools\ajax.swf" 这样就OK.

             第三种情况:  可以加载资源可是无法播放。分析思路

          第一:确定一下你传递的资源的后缀名是否正确,因为flexpaper 只能播放后缀名为swf的文件。

          第二: 查看文件的路径是否正确,如果在jsp页面中,必须查看传递的资源路径是否存在乱码。

          二 中文乱码的问题

            出现中文乱码的一般在txt格式转换成pdf格式的过程中还有就是在pdf转换成swf格式的时候出现。

            在这里先说第一种txt格式转换。在进行文本文档的转换时,进行一个中间过渡。可以先把txt转换成odt文件,之后转换成pdf格式就不会出现乱码。 具体的步骤在

仿百度文库解决方案(三)- 利用JODConverter把文档转换成pdf格式

               在pdf转换swf格式的出现的乱码比较容易解决。只需要几个代码修改一下就好了具体步骤如下:

         

在转换中,我发现有些中文PDF文件转换后会出现乱码的现象,因此这里还要处理一下乱码的问题。看到上面代码中红色的一段了吗?这就是解决乱码的方法。这个方法是参考了http://hi.baidu.com/xwx520/blog/item/1d0c423885b392fab311c72e.html这篇文章,感谢作者。

1.下载XPDFftp://ftp.foolabs.com/pub/xpdf/xpdf-chinese-simplified.tar.gz,并解压到xpdf-chinese-simplified目录下。

 

2.下载字体:http://blog.pjoke.com/wp-content/uploads/2009/02/font.zip,并解压到xpdf-chinese-simplified/CMap目录下。

 

3.修改xpdf-chinese-simplified目录下的add-to-xpdfrc文件。将里面的路径设为自己的路径:

 

4 之后在调用pdf2swf命令时后面加上“

  1. -s languagedir=D:\\xpdf-chinese-simplified";  

”就可以了。

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值