利用FlexPaper模仿百度文库实现文档的在线浏览

来源：互联网发布：幽灵行动4优化编辑：程序博客网时间：2024/04/29 19:47

1、概述

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

2、步骤

文档（Word、PPT、Excel等）---->文档（PDF） ----> 转换为SWF -----> 使用FlexPaper在线浏览

Word、PPT、Excel等转换为PDF需要用到OpenOffice和JodConverter，可参考http://doc.okbase.net/u010506940/archive/127415.html

1）转换SWF

需要使用一个工具,SwfTools

可以使用命令行将文件转换为swf文件;

例如将Paper3.pdf转换成Paper3.swf的命令为:

C:\SWFTools\pdf2swf.exe Paper3.pdf -oPaper3.swf

swftools提供了：

font2swf.exe、gif2swf.exe、gpdf2swf.exe、jpeg2swf.exe、pdf2swf.exe、png2swf.exe、wav2swf.exe

只需替换对应的*.exe文件即可

<span style="font-family:SimHei;font-size:18px;">import java.io.BufferedReader;  import java.io.File;  import java.io.IOException;  import java.io.InputStreamReader;    public class TestPdf2Swf {      public static int convertPDF2SWF(String sourcePath, String destPath,                      String fileName) throws IOException {          // 目标路径不存在则建立目标路径          File dest = new File(destPath);          if (!dest.exists())              dest.mkdirs();            // 源文件不存在则返回          File source = new File(sourcePath);          if (!source.exists())              return 0;            // 调用pdf2swf命令进行转换          String command = "C:\\Program Files (x86)\\SWFTools\\pdf2swf.exe"         + " " + sourcePath+ " -o "    + destPath + fileName + " -f -T 9";          System.out.println(command);          Process pro = Runtime.getRuntime().exec(command);            BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(pro.getInputStream()));          while (bufferedReader.readLine() != null);          try {              pro.waitFor();          } catch (InterruptedException e) {              e.printStackTrace();          }          return pro.exitValue();      }        public static void main(String[] args) {          String sourcePath = "D:\\test.pdf"; //源文件路径          String destPath = "D:\\";                      //目标路径          String fileName = "test.swf";       //生成文件名          try {              TestPdf2Swf.convertPDF2SWF(sourcePath, destPath, fileName);          } catch (IOException e) {              e.printStackTrace();          }      }  }  </span>

2）浏览器中浏览

首先要下载Flexpaper，作者是在JavaScript中用到的FlexPaper，将其copy到对应的项目下

实际只需要js文件下的flexpaper.js和jquery.min.js，以及FlexPaperViewer.swf。

<span style="font-family:SimHei;font-size:18px;"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">    <head>         <title></title>                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <script type="text/javascript" src="js/swfobject/swfobject.js"></script><script type="text/javascript" src="js/flexpaper_flash.js"></script><script type="text/javascript">             <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. -->             var swfVersionStr = "10.0.0";            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->            var xiSwfUrlStr = "js/swfobject/expressInstall.swf";                        var flashvars = {                   SwfFile : escape("Paper.swf"), //想显示的文件  Scale : 0.6,//0-1之间的数，表示显示的放大参数  ZoomTransition : "easeOut",<span id="transmark"></span>  ZoomTime : 0.5,    ZoomInterval : 0.1,    FitPageOnLoad : true,    FitWidthOnLoad : true,    PrintEnabled : true,    FullScreenAsMaxWindow : true,    ProgressiveLoading : true,        PrintToolsVisible : true,    ViewModeToolsVisible : true,    ZoomToolsVisible : true,    FullScreenVisible : true,    NavToolsVisible : true,    CursorToolsVisible : true,    SearchToolsVisible : true,        localeChain: "en_US"  };   var params = {    }            params.quality = "high";            params.bgcolor = "#ffffff";            params.allowscriptaccess = "sameDomain";            params.allowfullscreen = "true";            var attributes = {};            attributes.id = "FlexPaperViewer";            attributes.name = "FlexPaperViewer";            swfobject.embedSWF(                "FlexPaperViewer.swf", "flashContent",                 "650", "500",                swfVersionStr, xiSwfUrlStr,                 flashvars, params, attributes                );swfobject.createCSS("#flashContent", "display:block;text-align:left;");    </script>     </head>     <body>     <div style="position:absolute;left:10px;top:10px;">        <div id="flashContent">         <p>         To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed. </p> <script type="text/javascript"> var pageHost = ((document.location.protocol == "https:") ? "https://" :"http://"); document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); </script>         </div>        <div id="errNoDocument" style="padding-top:10px;">        Can't see the document? Running FlexPaper from your local directory? Make sure you have added FlexPaper as trusted. You can do that at <a href="http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065">Adobe's website</a>.          </div>         </div>   </body> </html> </span>

3、参数列表

详见FlexPaper阅读器开发手册

swfobject.embedSWF参数

2.0 embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

2.2   embedSWF: function(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)

swfUrlStr：（String，必须的）flash地址url,

replaceElemIdStr,：（String，必须的）替换元素的id

widthStr：（String，必须的）flash宽度，类型为字符串

heightStr：（String，必须的）flash高度

swfVersionStr：（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）

xiSwfUrlStr：（String，可选的）指定express install SWF的URL并激活Adobe express install

flashvarsObj：（Object，可选的）用name:value对指定你的flashvars

parObj：（Object，可选的）用name:value对指定你的嵌套object元素的params

attObj：（Object，可选的）用name:value对指定object的属性

callbackFn：（Function，可选的）flash加载完成的回调函数，2.2才支持。

callbackFn参数：{success:true/false,id:"object id",ref:DOM Element}

    success, Boolean to indicate whether the embedding of a SWF was success or not
    id, String indicating the ID used in swfobject.registerObject
    ref, HTML object element reference (returns undefined when success=false)

4、事件与函数

函数名称

函数说明

gotoPage (Number pageNumber)

跳转到指定页

fitWidth()

设置为宽度模式视图

fitHeight()

设置为高度模式视图

loadSwf (String swffile)

加载一个新的swf文件到浏览器中

getCurrPage()

获取当前页码

nextPage()

跳转到下一页

prevPage ()

跳转到上一页

Zoom (Number factor)

按系数缩放

searchText (String text)

搜索文字

switchMode (String mode)

变换视图模式;参数值可为("Portrait", "Two Page", "Tile")

printPaper ()

打印加载的文档

事件名称

事件说明

onDocumentLoaded ()

文档加载完成后触发

onDocumentLoadedError (String errorMessage)

加载文档出错时候触发

onProgress (Number bytesloaded, Number bytestotal)

文档正在加载的时候触发

onCurrentPageChanged (Number pagenumber)

页面改变时触发

onExternalLinkClicked (String link)

当用户点击外部链接的时候触发

0 0