FlexPaper+SWFTools 实现仿百度文库及一些小问题

发布时间：2020-12-15 04:36:39 所属栏目：百科来源：网络整理

导读：?网上已有很多FlexPaper仿百度文库的一些文章，园子里也有很多大牛的详细教程。 ? 结合这次做的例子，在这里详细记录一下使用Flexpaper实现仿百度文库的效果，及自己在跟着园子里的教程做的时候，遇到的一些小问题。希望能给初次接触或者遇到同样问题的同学

?网上已有很多FlexPaper仿百度文库的一些文章，园子里也有很多大牛的详细教程。

? 结合这次做的例子，在这里详细记录一下使用Flexpaper实现仿百度文库的效果，及自己在跟着园子里的教程做的时候，遇到的一些小问题。希望能给初次接触或者遇到同样问题的同学们提供一些小小的帮助。（描述不足之处，请大家多多见谅，毕竟是第一次在园子里写文章）。

1.准备工作：下载FlexPaper及PDF转换工具pdf2swf.exe

Flexpaper下载地址:下载?(我下的是1.4.5 Flash Version?(release notes))

Pdf2swf工具下载:下载? (我下的是swftools-2011-01-23-1815.exe下载后，安装)

2.运行官方的DEMO及Flexpaper的用法

?打开刚刚下载好的Flexpaper文件夹，打开里面的例子 index.html,

?（1）运行官方的例子，不能加载任何的.swf（包括例子中的swf）(如果能正常显示的话，请跳过这一步)

运行官方例子的时起，连所带的Paper.swf都不能加载成功，只见到右上角的圈圈一直在动，处于等待的状态。如下图：

?这种情况，是由于Flexpaper还没获得Adobe Flash的信任，这时你可以前住http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065?为FlexPaper添加信任.进入网页之后，点击左边的 Global Security Settings papel 这个选项,然后在右边(如下图)

为你的例子所在的文件夹添加信任。然后你再运行官方的例子，就会发现可以运行成功啦。

?(2)Flexpaper的用法

?我们可以查看index.html源代码，这里不多说，直接说它的用法吧:

?在前端的用法如下：

<!--首先要引入jquery库及相关的js-->
2 <script type="text/javascript" src="js/jquery.js"></script>
3 <script type="text/javascript" src="js/flexpaper_flash.js"></script>
4 <script type="text/javascript" src="js/flexpaper_flash_debug.js"></script>

html中的代码,只需声明一个a标签即可

<body> 
        <div style="position:absolute;left:10px;top:10px;">
            <a id="viewerPlaceHolder" style="width:660px;height:480px;display:block"></a>         
            <script type="text/javascript"> 
                var fp = new FlexPaperViewer(    
                         'FlexPaperViewer','viewerPlaceHolder',<!--对应于a 标签的id-->
                         { config : {
                         SwfFile : escape('ajax.swf'),<!--这句是关键: SwfFile: 指示导入的.swf的路径-->
                         Scale : 0.6,ZoomTransition : 'eaSEOut',ZoomTime : 0.5,ZoomInterval : 0.2,FitPageOnLoad : true,FitWidthOnLoad : false,PrintEnabled : true,FullScreenAsMaxWindow : false,ProgressiveLoading : false,MinZoomSize : 0.2,MaxZoomSize : 5,SearchMatchAll : false,InitViewMode : 'Portrait',ViewModeToolsVisible : true,ZoomToolsVisible : true,NavToolsVisible : true,CursorToolsVisible : true,SearchToolsVisible : true,localeChain: 'en_US'
                         }});
            </script>
        </div>
</body>

基本上，这样就可以在前端显示你的Flexpaper了.

? （3）只能加载官方例子所带的swf，但不能加载其他或自己的swf

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

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

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

参数说明如下：

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

SWFTools：pdf2swf.exe工具所在的文件夹,

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

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

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

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

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

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

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

3. Asp.net 调用pdf2swf.exe把PDF转换为SWF的用法

?代码如下：

private static void ConvertCmd(string fileName)
         {
             
             using (Process p = new Process())
             {
                 string cmdStr = HttpContext.Current.Server.MapPath("~/SWFTools/pdf2swf.exe");
                 string savePath = HttpContext.Current.Server.MapPath("~/TestSWF/");
                 // @"""" 相当于一个双引号，之所以要加@"""" 就是为了防止要转换的过程中，文件夹名字带有空格，导致失败
                 string sourcePath = @"""" + savePath + fileName + @"""";
                 string targetPath = @"""" + savePath + fileName.Substring(0,fileName.LastIndexOf(".")) + ".swf" + @"""";
                 string argsStr = "  -t " + sourcePath + " -s flashversion=9 -o " + targetPath;
                 //调用新进程 进行转换
                 ProcessStartInfo psi = new ProcessStartInfo(cmdStr,argsStr);
                 p.StartInfo = psi;
                 p.Start();
                 p.WaitForExit();
             }
         }

其中，我的pdf文件存放在~/TextSWF/文件夹下，转换后的swf也是存放在同一文件夹下。

按照以上的做法，应该没什么问题，就可以做出类似于百度文库的效果了。

好了，第一次写文章，难免会有疏漏不足这处，希望各位高手不吝啬指出与赐教.

如何使用flexpaper加载swf文件??

本文章只研究演示Flexpaper在WEB页面上的使用，我们要下载一个Flash版本的FlexPaper，这里我选择了FlexPaper_1.5.0_flash。

下载地址：http://code.google.com/p/flexpaper/downloads/list

下载、解压后，可以看到包含如下文件：?

????? ??

主要文件、文件夹说明：

Examples? 存放Flexpaper使用例子

Js??????? 存放Flexpaper调用的JS文件

Php?????? 存放PHP使用的文档、JS、库、SWF文件

Index.html 例子主页

FlexpaperViewer Flexpaper的核心文件，用于浏览PDF

Paper.swf? 官方的默认宣传文件

playerProductInstall.swf? 如果客户端浏览器的flashplayer版本过低，他是不会嵌入你的swf,而是嵌入这个playerProductInstall.swf到页面上下载flashplayer的安装文件。

下面是第一个Flexpaper例子

一个最简单的例子，我们主要用到FlexpaperViewer.swf、JS文件夹中的flexpaper_flash.js

创建HTML页面test.html，代码如下：

<HTML>

?<HEAD>

? <TITLE>ajava.org Flexpaper例子</TITLE>

? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

?</HEAD>

<BODY>

??? ?? ?????<p id="viewerPlaceHolder" style="width:660px;height:553px;display:block">Document loading..</p>

??? ??????? <script type="text/javascript"> ???????????????

??????????????? var fp = new FlexPaperViewer(??

??????????????????????? ?'FlexPaperViewer',

??????????????????????? ?'viewerPlaceHolder',{ config : {

??????????????????????? ?SwfFile : escape('FusionCharts.swf'),208); text-indent:2em"> ??????????????????????? ?Scale : 0.6,208); text-indent:2em"> ??????????????????????? ?ZoomTransition : 'eaSEOut',208); text-indent:2em"> ??????????????????????? ?ZoomTime : 0.5,208); text-indent:2em"> ??????????????????????? ?ZoomInterval : 0.2,208); text-indent:2em"> ??????????????????????? ?FitPageOnLoad : true,208); text-indent:2em"> ??????????????????????? ?FitWidthOnLoad : false,208); text-indent:2em"> ??????????????????????? ?FullScreenAsMaxWindow : false,208); text-indent:2em"> ??????????? ??????????? ?ProgressiveLoading : false,208); text-indent:2em"> ??????????????????????? ?MinZoomSize : 0.2,208); text-indent:2em"> ??????????????????????? ?MaxZoomSize : 5,208); text-indent:2em"> ??????????????????????? ?SearchMatchAll : false,208); text-indent:2em"> ??????????????????????? ?InitViewMode : 'Portrait',208); text-indent:2em"> ??????????????????????? ?PrintPaperAsBitmap : false,208); text-indent:2em"> ??????????????????????? ?ViewModeToolsVisible : true,208); text-indent:2em"> ??????????????????????? ?ZoomToolsVisible : true,208); text-indent:2em"> ??????????????????????? ?NavToolsVisible : true,208); text-indent:2em"> ??????????????????????? ?CursorToolsVisible : true,208); text-indent:2em"> ??????????????????????? ?SearchToolsVisible : true,? ??????????????????????

? ????????????????????? ?localeChain: 'en_US'?

??????????????????????? ?}});??

??? ??????? </script>

</div>

</BODY>

</HTML>

把第三章部分生产的FusionCharts.swf复制到FlexPaper根目录下，我这里是 F:FlexPaper1.5.0flash，这一步是必须的，如果不是test.html怎样读取到FusionCharts.swf呢？

测试：

打开浏览器，输入test.html的本地地址，就可以看到FlexPaper的浏览效果。这里我分别在前言中的3种测试环境，结果都没问题，效果如下图：

如果你用FF浏览器，出现提示“SecurityError: Error #2148: SWF 文件 file:/// F:/FlexPaper1.5.0flash /FlexPaperViewer.swf 不能访问本地资源FusionCharts.swf。只有仅限于文件系统的 SWF 文件和可信的本地 SWF 文件可以访问本地资源。”，或者IE一直都处于加载状态，这种情况，是由于Flexpaper还没获得Adobe Flash的信任，这时你可以请访问?http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04a.html#119065，选择始终允许，把FlexPaper1.5.0flash文件夹添加到信任列表中。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!