发布：2020/2/18 11:20:09作者：管理员来源：本站浏览次数：1283

2015-03-02 更新文章，由于需求修改，更改了flexpaper插件，故增加第9、10、11小节，下载代码时请注意。

先废话几句。最近用到文档在线浏览功能，之前用的是print2flash（一个工具，文档直接转flash，自带翻页搜索等一系列功能），由于无法与js进行交互，所以改用flexpaper。

由于之前没接触过Flex，了解不多，所以文章难免有不合适的地方。希望各位给予指正。

首先感谢ajava.org的mark，一系列文章有很多的帮助，少走很多弯路。

开发工具：1.Adobe Flash Builder 4.5。下载地址：http://trials3.adobe.com/AdobeProducts/FLBR/4_5/win32/FlashBuilder_4_5_LS10.exe (目前已失效)

2.Flash Player Debugger 。下载地址：http://download.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_ax_debug.exe (目前已失效)

3.Flex项目用的是Flex SDK4.5。

如果你没有Flex基础或不了解FlexPaper，强烈推荐你参考mark的文章。

具体修改FlexPaper的步骤就不多说了，随便百度一下，都是一大堆，具体的可以参阅mark的文章。PDF版下载

提供编译后的文件下载（不带间隔时间限制）。下载

修改后的FlexPaper项目文件下载（不带间隔时间限制）。csdn资源（如果没有积分可以评论留下邮箱）

FlexPaper 2.1.2版本项目的源代码，有bug。csdn资源

FlexPaper 2.1.2Demo。下载地址：https://code.google.com/p/flexpaper/downloads/detail?name=FlexPaper_2.1.2.zip&can=2&q=

下面说说主要内容。

1.去关于、Logo和打印功能可以参照mark系列的文章或者文末的链接

2.我修改的打印按钮是可通过属性进行控制的，默认不显示

官网demo中要修改flexpaper.js中传递参数的地方，加入PrintEnabled和PrintVisible属性。

 1 window[instance] = flashembed(id, {  2 src                            : _jsDirectory+"../FlexPaperViewer.swf",  3 version                        : [10, 0],  4 expressInstall                : "js/expressinstall.swf",  5  wmode                        : _WMode  6  },{  7  ElementId               : id,  8  SwfFile                  : _SWFFile,  9  PdfFile                  : _PDFFile, 10  IMGFiles                  : _IMGFiles, 11  JSONFile                 : _JSONFile, 12  useCustomJSONFormat     : config.useCustomJSONFormat, 13  JSONPageDataFormat         : config.JSONPageDataFormat, 14  JSONDataType             : _JSONDataType, 15 Scale                     : (config.Scale!=null)?config.Scale:0.8, 16 ZoomTransition             : (config.ZoomTransition!=null)?config.ZoomTransition:'easeOut', 17 ZoomTime                 : (config.ZoomTime!=null)?config.ZoomTime:0.5, 18 ZoomInterval             : (config.ZoomInterval)?config.ZoomInterval:0.2, 19 FitPageOnLoad             : (config.FitPageOnLoad!=null)?config.FitPageOnLoad:false, 20 FitWidthOnLoad             : (config.FitWidthOnLoad!=null)?config.FitWidthOnLoad:false, 21 FullScreenAsMaxWindow     : (config.FullScreenAsMaxWindow!=null)?config.FullScreenAsMaxWindow:false, 22 ProgressiveLoading         : (config.ProgressiveLoading!=null)?config.ProgressiveLoading:false, 23 MinZoomSize             : (config.MinZoomSize!=null)?config.MinZoomSize:0.2, 24 MaxZoomSize             : (config.MaxZoomSize!=null)?config.MaxZoomSize:5, 25 SearchMatchAll             : (config.SearchMatchAll!=null)?config.SearchMatchAll:false, 26 // PrintEnabled             : (config.PrintEnabled!=null)?config.PrintEnabled:false, 27 // PrintVisible             : (config.PrintVisible!=null)?config.PrintVisible:false, 28  SearchServiceUrl         : config.SearchServiceUrl, 29  InitViewMode             : config.InitViewMode, 30 BitmapBasedRendering     : (config.BitmapBasedRendering!=null)?config.BitmapBasedRendering:false, 31  StartAtPage             : config.StartAtPage, 32 PrintPaperAsBitmap        : (config.PrintPaperAsBitmap!=null)?config.PrintPaperAsBitmap:false, 33 AutoAdjustPrintSize        : (config.AutoAdjustPrintSize!=null)?config.AutoAdjustPrintSize:false, 34 35 EnableCornerDragging     : ((config.EnableCornerDragging!=null)?config.EnableCornerDragging:true), // FlexPaper Zine parameter 36 BackgroundColor         : config.BackgroundColor, // FlexPaper Zine parameter 37 PanelColor                 : config.PanelColor, // FlexPaper Zine parameter 38 BackgroundAlpha         : config.BackgroundAlpha, // FlexPaper Zine parameter 39 UIConfig                : config.UIConfig, // FlexPaper Zine parameter 40 41 ViewModeToolsVisible     : ((config.ViewModeToolsVisible!=null)?config.ViewModeToolsVisible:true), 42 ZoomToolsVisible         : ((config.ZoomToolsVisible!=null)?config.ZoomToolsVisible:true), 43 NavToolsVisible         : ((config.NavToolsVisible!=null)?config.NavToolsVisible:true), 44 CursorToolsVisible         : ((config.SearchToolsVisible!=null)?config.CursorToolsVisible:true), 45 SearchToolsVisible         : ((config.SearchToolsVisible!=null)?config.SearchToolsVisible:true), 46  StickyTools                : config.StickyTools, 47  Toolbar                 : config.Toolbar, 48  DocSizeQueryService     : config.DocSizeQueryService, 49 50  RenderingOrder             : config.RenderingOrder, 51 52 localeChain             : (config.localeChain!=null)?config.localeChain:"en_US", 53  jsDirectory             : _jsDirectory, 54  cssDirectory             : _cssDirectory, 55  localeDirectory            : _localeDirectory, 56  key                     : config.key 57 });

调用的地方：

 1 $('#documentViewer').FlexPaperViewer(  2  { config : {  3  DOC : escape(getDocumentUrl(startDocument)),  4 Scale : 2,  5 ZoomTransition : 'easeOut',  6 ZoomTime : 0.5,  7 ZoomInterval : 0.2,  8 FitPageOnLoad : true,  9 FitWidthOnLoad : false, 10 FullScreenAsMaxWindow : false, 11 ProgressiveLoading : false, 12 MinZoomSize : 0.2, 13 MaxZoomSize : 5, 14 SearchMatchAll : false, 15 // PrintEnabled:false, 16 // PrintVisible:true, 17 InitViewMode : 'Portrait', 18 RenderingOrder : '<%=(configManager.getConfig("renderingorder.primary") + ',' + configManager.getConfig("renderingorder.secondary")) %>', 19 20 ViewModeToolsVisible : true, 21 ZoomToolsVisible : true, 22 NavToolsVisible : true, 23 CursorToolsVisible : true, 24 SearchToolsVisible : true, 25 26 DocSizeQueryService : 'services/swfsize.ashx?doc=' + startDocument, 27 jsDirectory : 'js/', 28 29 JSONDataType : 'jsonp', 30 key : '<%=configManager.getConfig("licensekey") %>', 31 32 localeChain: 'zh_CN' 33 34  }} 35 );

3.修改搜索bug

2.1.2版本的源码搜索中有Bug.第一次和第二次搜索的结果并存。修改后的版本修复整个文件搜索。

但是分页加载时搜索只能搜索当前页，官网Demo也是这样，Flex一窍不通，不知如何修改。囧。。。

修改View.as中searchText函数中for循环部分。改为：

 1 if(clearmarklist){  2 if(_markList!=null){  3 for(var i:int=0;i<_markList.length;i++){  4 if(_markList[i]!=null && _markList[i].parent !=null){  5 // for(var ic:int=0;ic<_markList[i].numChildren;ic++){  6 // if(_markList[i].getChildAt(ic) is SearchShapeMarker){  7 // _markList[i].removeChildAt(ic);  8 // }  9 // } 10  _markList[i].parent.removeChild(_markList[i]); 11  } 12  } 13  } 14 15 _markList = new Array(numPages); 16 }

4.修改缩略图bug

当时遇到这问题的时候，百度了一下，说替换googlecode中的SDK3.5的swc就可以。但是失败。

自己尝试修改，发现把Flex项目属性>Flex编译器>Flex SDK版本>”使用兼容Flex 3兼容模式“，然后会报错，再将FlexPaperViewer_Base.mxml中第9行的borderThickness="1"更改为如下四个属性即可：

paddingBottom="0"
paddingLeft="0"
paddingRight="0"
paddingTop="0"

5.添加按钮

修改FlexPaperViewer.mxml中<mx:HBox>节点代码。例如我加的一个书签按钮。

<mx:HBox styleName="toolbarBackground" width="100%" height="26" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="2" paddingLeft="2" horizontalGap="3"> <st:GradientImageButton id="PrintButton" icon="{MenuIcons.PRINT_ICON}" styleName="toolbttn" width="20" click="printPaper(event)" toolTip="@Resource(key='Print', bundle='FlexPaper')" visible="{PrintVisible}" includeInLayout="{!ReadOnly}" enabled="{PrintEnabled}" /> <mx:Image id="PrintBar" source="{MenuIcons.BAR}" width="3" height="21" includeInLayout="{!ReadOnly}" visible="{PrintVisible}" /> <st:GradientImageButton icon="@Embed('../src/img/bookmarks.png')" styleName="toolbttn" width="20" click="paper1.bookMarks();" toolTip="@Resource(key='BookMarks', bundle='FlexPaper')" tabIndex="1" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/>

6.javascript与Flex交互

javascript交互分两种情况，1是Flex调js，2是js调用Flex。

可以参考：http://www.cnblogs.com/tiandi/archive/2012/06/03/2532977.html

http://wymsxty.blog.163.com/blog/static/77790858201083045541915/

http://blog.csdn.net/kunoy/article/details/7903258 这里js调用Flex的时候，javascript可能会报错。即window.FlexPaperViewer_Instance.getApi()中FlexPaperViewer_Instance会是undefined。我没找到什么原因。可参照上面两种，记得引入swfobject.js。

7.去右键菜单

注释掉FlexPaperViewer_Base.mxml中所有contextMenu.customItems.push()的代码。contextMenu.clipboardMenu三行属性都改为false.

1 contextMenu.clipboardMenu = false;//是否使用剪贴板菜单 2 contextMenu.clipboardItems.copy = false; 3 contextMenu.clipboardItems.selectAll = false;

8.书签功能

书签功能原理是点击按钮，获取当前页数，然后需要和Js进行交互，Js保存当前页数。

按钮添加在FlexPaperViewer.mxml中<mx:HBox> 节点中：

 <st:GradientImageButton icon="@Embed('../src/img/bookmarks.png')" styleName="toolbttn" width="20" click="paper1.bookMarks();" toolTip="@Resource(key='BookMarks', bundle='FlexPaper')" tabIndex="1" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/>

        public function bookMarks():void{
            var m:String = ExternalInterface.call("ShowCurrentPage",_currPage);
            trace(m);
        }

通过js和按钮进行交互。

以下内容为更新内容，更新时间：2015-03-02，文中所指行数为修改代码的行数。

9.去掉右侧滚动条和工具栏文本框

由于需要增加现有需求，需要增加翻页时间间隔功能，所以添加9和10 两小节内容。

屏蔽右侧滚动条，修改内容Viewer.as文件中createDisplayContainer 方法（1508行，_paperContainer 变量实例化之后），添加：

//屏蔽右侧滚动条 _paperContainer.verticalScrollPolicy="off";

替换工具栏文本框防止翻页，修改FlexPaperViewer.mxml中<mx:HBox/> 节点中：

        <!-- 屏蔽切换页--> <!--<st:GradientTextInput id="txtPage" visible="{NavToolsVisible}" width="45" height="21"
                              enabled="{paper1.ViewMode == ViewModeEnum.PORTRAIT||paper1.ViewMode == ViewModeEnum.TWOPAGE||paper1.ViewMode == ViewModeEnum.SINGLEPAGE}"
                              fontSize="9" includeInLayout="{NavToolsVisible}"
                              keyDown="txtPageNumKeyDown(event)" tabIndex="12"
                              text="{formatPageNumber(paper1.currPage)}"
                              toolTip="@Resource(key='Current Page', bundle='FlexPaper')"/>--> <!-- 修改切换页为文本--> <st:GradientLabel id="txtPage" visible="{NavToolsVisible}" width="45" height="21" paddingTop="2" enabled="{paper1.ViewMode == ViewModeEnum.PORTRAIT||paper1.ViewMode == ViewModeEnum.TWOPAGE||paper1.ViewMode == ViewModeEnum.SINGLEPAGE}" fontSize="9" includeInLayout="{NavToolsVisible}" tabIndex="12" text="{formatPageNumber(paper1.currPage)}" toolTip="@Resource(key='Current Page', bundle='FlexPaper')"/>

10.增加翻页间隔

增加翻页间隔，用到计时器，而且开放给外部js传参，固定间隔时间。

首先在默认包中FlexPaperViewer.mxml文件中定义外部调用参数(62行)
```
[Bindable] public var _IntervalSecond:Number = 0;
```
在InitApp方法中获取Js传的值，默认值为5（116行）.
```
_IntervalSecond = getNumber(params,"IntervalSecond",5);
```
在FlexPaperViewer_Base.mxml文件中定义变量，供传值（141行）
```
[Bindable] public var IntervalSecond:Number=0;
```
在FlexPaperViewer.mxml文件末尾的<fp:FlexPaperViewer />中传参给FlexPaperViewer_Base。
```
IntervalSecond="{_IntervalSecond}"
```

在FlexPaperViewer_Base.mxml同级目录中的FlexPaperViewer.mxml文件中添加如下变量和方法（207行）：

            //计时器参数 public var pstartTime:Number = 0; public var pstarttimer:Timer; //上次阅读到的页数 public var lastPageNumber:Number=0; /** * 开始计时 */ public function funTimer(event:TimerEvent):void{
                pstartTime++;
            } /** * 停止计时 并归0 */ public function PageTimerReset():void{
                pstarttimer.reset();
                pstartTime = 0;
                pstarttimer.start();
            } //上次阅读页数 private var _oldpage:Number=1; //是否已显示alert private var isShowAlert:Boolean=false; // 关闭后触发的事件  private function alertClickFirst(event:CloseEvent):void {  
                isShowAlert=false; //跳转指定页  paper1.gotoPage(_oldpage);
            }

在initApp方法中添加计时器启动代码（64行）：

            public function initApp():void { //去除LOGO paper1.removeElementAt(2); //初始化，计时器操作 pstarttimer=new Timer(1000);//1000是指1秒  pstarttimer.addEventListener(TimerEvent.TIMER, funTimer);
                pstarttimer.start();
            }

修改formatPageNumber方法（243行）：

            protected function formatPageNumber(n:Number):String
            { //如果已弹窗，不继续执行 if(isShowAlert) return _oldpage.toString(); //如果当前页面不等于上次打开的页面，并且当前页面大于上次打开页面，并且时间小于设定间隔，开始提醒 if(n!=1 && n!=_oldpage && n>lastPageNumber && pstartTime<IntervalSecond)
                { //如果已经弹窗，就不再弹窗 if(!isShowAlert){
                        isShowAlert=true;
                        Alert.show("读书有三到，谓心到，眼到，口到。","", Alert.OK  , this, alertClickFirst);
                    } return _oldpage.toString();
                } else { if(_oldpage!=n) //计时器重启  PageTimerReset();
                    
                    _oldpage=n; if(n>lastPageNumber)
                        lastPageNumber=n; if(viewer.ViewMode == ViewModeEnum.TWOPAGE) return viewer.currPage.toString() + "-" + (viewer.currPage+1).toString(); else return n.toString();
                }
            }

11.增加上次阅读到xx功能

由于添加此功能，所以带翻页间隔的代码中就屏蔽掉了书签按钮。

这里的记录页数，是通过Js和FlexPaper进行交互获取，需要你自己处理保存在服务器中。

在默认包中FlexPaperViewer.mxml中定义_StartPage 变量，并在initApp方法中进行获取Js传的值，最后传递给FlexPaperViewer_Base中，同第10节定义变量。

[Bindable] public var _StartPage:Number;
...

_StartPage=getNumber(params,"StartPage",1);

...

StartAtPage="{_StartPage}"

在FlexPaperViewer_Base.mxml中修改viewercreationCompleteHandler（205行）和documentLoadedHandler（426行）方法：

    private function viewercreationCompleteHandler(e:FlexEvent):void{ if(_documentLoadedFirst && !_stageinitialized){
                    dispatchEvent(new DocumentLoadedEvent(DocumentLoadedEvent.DOCUMENT_LOADED,viewer.numPages)); if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){
                        viewer.gotoPage(StartAtPage);
                    } //flash.utils.setTimeout(function():void{ if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;} //},1000);  }
                
                _stageinitialized = true;
            }

protected function documentLoadedHandler(event:Event):void{ if(_stageinitialized){
                    dispatchEvent(event); if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);}
                    flash.utils.setTimeout(function():void{ if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;}
                    },1000);
                }else{
                    _documentLoadedFirst = true;
                }
            }

在FlexPaperViewer_Base.mxml同级目录下FlexPaperViewer.mxml中<mx:HBox />节点下增加（用于显示提示信息）：

<mx:HBox id="TitileBox" width="99%" backgroundColor="#FFF9F2" borderColor="#F6CB1E" textAlign="center">
        <mx:Label id="lblTitleMsg" width="90%" buttonMode="true" click="lblTitleMsg_clickHandler()" fontSize="15" mouseChildren="false" useHandCursor="true"/>
        <mx:Label id="lblCloseMsg" width="20" buttonMode="true" click="lblCloseMsg_clickHandler()" fontSize="20" mouseChildren="false" text="×" toolTip="关闭提示" useHandCursor="true"/>
    </mx:HBox>

在FlexPaperViewer.mxml中定义跳转和关闭方法（282行）：

            protected function lblCloseMsg_clickHandler():void {
                TitileBox.removeAllElements();
            } protected function lblTitleMsg_clickHandler():void {
                paper1.gotoPage(1);
            }

修改documentLoadedHandler 方法（114行）：

            protected override function documentLoadedHandler(event:Event):void{
                spin1.visible = false;
                lblProgress.visible = false;
                spin1.stop();
                bttnInfo.visible =false; super.documentLoadedHandler(event); if(StartAtPage==1 || isNaN(StartAtPage) || StartAtPage==0)
                    TitileBox.removeAllElements(); else {
                    _oldpage=StartAtPage;
                    lblTitleMsg.text="您上次阅读到第 "+StartAtPage+" 页，点击这里返回第 1 页";
                }
            }

带翻页间隔二次开发源代码：下载

编译过版本：下载

2015-03-02 更新内容完

另外推荐几篇关于FlexPaper的博客：

flexPaper简单二次开发：http://www.cnblogs.com/longjunhao00/archive/2012/11/22/2782036.html

FlexPaper阅读器开发手册(原创) ：http://wujwmail.blog.163.com/blog/static/17055443320119532652421/

FlexPaper二次开发问题及搜索高亮显示：http://www.cnblogs.com/zamlove/archive/2013/05/07/3065079.html

FlexPaper初步使用时遇到的问题解决：http://blog.sina.com.cn/s/blog_673c98be0101b49m.html

转载请注明出处：http://www.cnblogs.com/xcong/p/3142155.html

　FlexPaper+SWFTool+操作类=在线预览PDF

FlexPaper+OpenOffice实现web的在线文档预览功能　

关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

柏港建站平台

柏港 asp.net(c#)

关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

1.去关于、Logo和打印功能可以参照mark系列的文章或者文末的链接

2.我修改的打印按钮是可通过属性进行控制的，默认不显示

3.修改搜索bug

4.修改缩略图bug

5.添加按钮

6.javascript与Flex交互

7.去右键菜单

8.书签功能

9.去掉右侧滚动条和工具栏文本框

10.增加翻页间隔

11.增加上次阅读到xx功能

柏港为您推荐了一些相关资讯

柏港 asp.net(c#)

关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

1.去关于、Logo和打印功能可以参照mark系列的文章或者文末的链接

2.我修改的打印按钮是可通过属性进行控制的，默认不显示

3.修改搜索bug

4.修改缩略图bug

5.添加按钮

6.javascript与Flex交互

7.去右键菜单

8.书签功能

9.去掉右侧滚动条和工具栏文本框

10.增加翻页间隔

11.增加上次阅读到xx功能

柏港为您推荐了一些相关资讯

关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题