关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题
先废话几句。最近用到文档在线浏览功能，之前用的是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。
具体修改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;
另外推荐几篇关于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
关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题,古老的榕树,5-wow.com
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
