Extjs上传附件实战开发，实现批量上传及在线预览功能（四）

其他 2018-09-04 05:21:32 阅读次数: 0

在线预览功能：

      使用软件：FlexPaper1.5.6。

      FlexPaper为二次开发双版本，版本一为js控制文档打开，和网上很多资料类似，但完善了很多函数，具体说明见前文；版本二为FlexPaper直接获取地址参数打开文档，具体代码如下：

       版本一：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:fp="com.devaldi.controls.flexpaper.*"
				layout="absolute" width="100%" height="100%" 
				applicationComplete="initApp();">
	
	<mx:Metadata>
		[ResourceBundle("FlexPaper")]
		[Event(name="onDocumentLoaded", type="com.devaldi.events.DocumentLoadedEvent")]
		[Event(name="onLoadingProgress", type="flash.events.ProgressEvent")]
		[Event(name="onDocumentLoadedError", type="flash.events.ErrorEvent")]
		[Event(name="onCurrPageChanged", type="com.devaldi.events.CurrentPageChangedEvent")]
		[Event(name="onDocumentLoading", type="flash.events.Event")]
		[Event(name="onExternalLinkClicked", type="com.devaldi.events.ExternalLinkClickedEvent")]
		[Event(name="onDocumentPrinted", type="com.devaldi.events.DocumentPrintedEvent")]
		[Event(name="onPageLoaded", type="com.devaldi.events.PageLoadedEvent")]
		[Event(name="onPageLoading", type="com.devaldi.events.PageLoadingEvent")]
		[Event(name="onErrorLoadingPage", type="com.devaldi.events.ErrorLoadingPageEvent")]
	</mx:Metadata>
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.devaldi.events.CurrentPageChangedEvent;
			import com.devaldi.events.CursorModeChangedEvent;
			import com.devaldi.events.DocumentLoadedEvent;
			import com.devaldi.events.DocumentPrintedEvent;
			import com.devaldi.events.ErrorLoadingPageEvent;
			import com.devaldi.events.ExternalLinkClickedEvent;
			import com.devaldi.events.FitModeChangedEvent;
			import com.devaldi.events.ScaleChangedEvent;
			import com.devaldi.events.ViewModeChangedEvent;
			
			public var _aid:Number = 0;//文档ID
			
			[Bindable]
			public var _Scale:Number = 1;//缩放比例
			
			[Bindable]
			public var _EncodeURI:Boolean = true;
			
			[Bindable]
			public var _SwfFile:String = "";//SWF文件路径
			
			[Bindable]
			public var _ZoomTransition:String = "easeOut";
			
			[Bindable]
			public var _ZoomTime:Number = 0.6;
			
			[Bindable]
			public var _ZoomInterval:Number = 0.1;
			
			[Bindable]
			public var _MinZoomSize:Number = 0.3;
			
			[Bindable]
			public var _MaxZoomSize:Number = 5;
			
			[Bindable]
			public var _FitPageOnLoad:Boolean = false;//加载后适合高度
			
			[Bindable]
			public var _FitWidthOnLoad:Boolean = false;//加载后适合宽度
			
			[Bindable]
			public var _PrintEnabled:Boolean = true;//是否支持打印
			
			[Bindable]
			public var _FullScreenAsMaxWindow:Boolean = false;//是否支付全屏
			
			[Bindable]
			public var _ProgressiveLoading:Boolean = false;//是否延迟加载
			
			[Bindable]
			public var _localeChain:String = "zh_CN";//语言
			
			private var isFocus:Boolean = false;
			
			
			//------------------------
			[Bindable]
			public var _SearchMatchAll:Boolean = true;
			
			[Bindable]
			public var _PrintPaperAsBitmap:Boolean = false;
			
			[Bindable]
			public var _ViewModeToolsVisible:Boolean = true;
			
			[Bindable]
			public var _ZoomToolsVisible:Boolean = true;
			
			[Bindable]
			public var _NavToolsVisible:Boolean = true;
			
			[Bindable]
			public var _CursorToolsVisible:Boolean = true;
			
			[Bindable]
			public var _SearchToolsVisible:Boolean = true;
			//初始化参数
			private function initApp():void{
				var params:Object = Application.application.parameters;
				_Scale = getNumber(params, "Scale", 1);
				_SwfFile = getString(params, "SwfFile", "Paper.swf");
				_EncodeURI = getNumber(params, "EncodeURI", 1);
				_ZoomTransition = getString(params, "ZoomTransition", "easeOut");
				_ZoomTime = getNumber(params, "ZoomTime", 0.6);
				_MinZoomSize = getNumber(params, "MinZoomSize", 0.2);
				_MaxZoomSize = getNumber(params, "MaxZoomSize", 5);
				_ZoomInterval = getNumber(params, "ZoomInterval", 0.1);
				_FitPageOnLoad = getBoolean(params, "FitPageOnLoad", false);
				_FitWidthOnLoad = getBoolean(params, "FitWidthOnLoad", false);
				_PrintEnabled = getBoolean(params, "PrintEnabled", true);
				_FullScreenAsMaxWindow = getBoolean(params, "FullScreenAsMaxWindow", false);
				_ProgressiveLoading = getBoolean(params, "ProgressiveLoading", true);
				_localeChain = params["localeChain"];
				
				_SearchMatchAll=getBoolean(params, "SearchMatchAll", true);
				_PrintPaperAsBitmap=getBoolean(params, "PrintPaperAsBitmap", false);
				_ViewModeToolsVisible=getBoolean(params, "ViewModeToolsVisible", true);
				_ZoomToolsVisible=getBoolean(params, "ZoomToolsVisible", true);
				_NavToolsVisible=getBoolean(params, "NavToolsVisible", true);
				_CursorToolsVisible=getBoolean(params, "CursorToolsVisible", true);
				_SearchToolsVisible=getBoolean(params, "SearchToolsVisible", true);
				//注册事件监听
				this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
				this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
				this.addEventListener(MouseEvent.CLICK,setFocusTo);	
				this.addEventListener("onPageLoaded",pageLoadedEventHandler);	

				//开放给外部（javascript）调用
				ExternalInterface.addCallback("hasFocus", hasFocus);
				ExternalInterface.addCallback("setViewerFocus", setViewerFocus); 
				ExternalInterface.addCallback("gotoPage", gotoPage);
				ExternalInterface.addCallback("fitWidth", fitWidth);
				ExternalInterface.addCallback("fitHeight", fitHeight);
				ExternalInterface.addCallback("loadSwf", loadSwf);
				ExternalInterface.addCallback("printPaperRange", printPaperRange);
				ExternalInterface.addCallback("searchText", searchText);
				ExternalInterface.addCallback("prevSearchMatch", prevSearchMatch);
				ExternalInterface.addCallback("nextSearchMatch", nextSearchMatch);
				ExternalInterface.addCallback("switchMode", switchMode);
				ExternalInterface.addCallback("Zoom", Zoom);
				ExternalInterface.addCallback("nextPage", nextPage);
				ExternalInterface.addCallback("getCurrPage", getCurrPage);
				ExternalInterface.addCallback("prevPage", prevPage);
				ExternalInterface.addCallback("printPaper", printPaper);
				ExternalInterface.addCallback("getTotalPages", getTotalPages);
				
			}
			//---------------------------事件------------------------------
			protected function onLoadedError(event:ErrorEvent):void{
				dispatchEvent(event);	
			}
			private function setFocusTo(e:MouseEvent):void{
				stage.stageFocusRect = false;
				stage.focus = e.target as InteractiveObject;
			}
			private function onMouseOver(event:MouseEvent):void{
				this.isFocus = true;
			}
			
			private function onMouseOut(event:MouseEvent):void{
				this.isFocus = false;
			}
			protected function onCurrPageChanged(event:CurrentPageChangedEvent):void{
				dispatchEvent(event);
			}
			protected function documentLoadedErrorHandler(event:Event):void{
				dispatchEvent(event);
			}
						
			protected function onExternalLinkClickedHandler(event:ExternalLinkClickedEvent):void{
				dispatchEvent(event);
			}
			
			protected function onDocumentLoadingProgressHandler(event:ProgressEvent):void{
				dispatchEvent(event);
			}
			
			protected function papersLoadingHandler(event:Event):void{
				dispatchEvent(event);
			}
			
			protected function pageLoadingEventHandler(event:Event):void{
				dispatchEvent(event);
			}
			
			protected function documentPrintedHandler(event:DocumentPrintedEvent):void{
				dispatchEvent(event);
			}
			
			protected function documentLoadedHandler(event:Event):void{
				dispatchEvent(event);
			}	
			
			protected function pageLoadedEventHandler(event:Event):void{
				dispatchEvent(event);
			}
			
			protected function errorLoadingPageEventHandler(event:ErrorLoadingPageEvent):void{
				dispatchEvent(event);
			}
			//----------------------------函数-----------------------------
			public function getTotalPages():Number{
				return FlexPaper.getTotalPages();
			}

			public function printPaper(e:Event):void{
				FlexPaper.printPaper(e);
			}
			
			public function printPaperRange(range:String):void{
				FlexPaper.printPaperRange(range);
			}
			public function searchText(text:String):void{
				FlexPaper.searchText(text);				
			}		
			
			public function prevSearchMatch():void{
				FlexPaper.prevSearchMatch();
			}
			
			public function nextSearchMatch(text:String):void{
				FlexPaper.nextSearchMatch(text);
			}
			
			public function switchMode(mode:String=null):void{
				FlexPaper.switchMode(mode);
			}
			public function Zoom(factor:Number):void{
				FlexPaper.Zoom(factor);
			}
					
			public function nextPage():void{
				FlexPaper.nextPage();
			}	
						
			public function prevPage():void{
				return FlexPaper.prevPage();
			}
			public function getCurrPage():Number{
				return FlexPaper.getCurrPage();
			}
			public dynamic function loadSwf(s:String):void{
				FlexPaper.SwfFile = s;
			}
			public function fitHeight():void{
				FlexPaper.fitHeight();
			}	
			public function fitWidth():void{
				FlexPaper.fitWidth();
			}
			public function gotoPage(p:Number):void{
				FlexPaper.gotoPage(p);
			}			
			
			public function hasFocus():Boolean{
				return isFocus;
			}
			
			public function setViewerFocus(isFocus:Boolean):void{
				this.FlexPaper.setViewerFocus();
			}
			
			/**
			 * 
			 * 获取String类型参数
			 * 如果没有，则返回默认值
			 **/
			private function getString(params:Object, name:String, def:String):String{
				if(params[name] != null){
					return params[name];
				}
				return def;
			}
			
			private function getNumber(params:Object, name:String, def:Number):Number{
				if(params[name] != null){
					return params[name];
				}
				return def;
			}
			
			private function getBoolean(params:Object, name:String, def:Boolean):Boolean{
				if(params[name] != null){
					return params[name] == "true";
				}
				return def;
			}
		]]>
	</mx:Script>
	<fp:FlexPaperViewer id="FlexPaper"
						width="100%" 
						height="100%" 
						onDocumentLoaded="documentLoadedHandler(event)" 
						onDocumentLoading="papersLoadingHandler(event)"
						onDocumentLoadedError="documentLoadedErrorHandler(event)"					
						onLoadingProgress="onDocumentLoadingProgressHandler(event)"
						onCurrPageChanged="onCurrPageChanged(event)"
						onExternalLinkClicked="onExternalLinkClickedHandler(event)" 
						onDocumentPrinted="documentPrintedHandler(event)"
						onPageLoaded="pageLoadedEventHandler(event)"
						onPageLoading="pageLoadingEventHandler(event)"
						onErrorLoadingPage="errorLoadingPageEventHandler(event)"
						
						Scale="{_Scale}" 
						SwfFile="{_SwfFile}" 
						ZoomTransition="{_ZoomTransition}" 
						ZoomTime="{_ZoomTime}" 
						MinZoomSize="{_MinZoomSize}"
						MaxZoomSize="{_MaxZoomSize}"
						ZoomInterval="{_ZoomInterval}"
						FitPageOnLoad="{_FitPageOnLoad}"
						FitWidthOnLoad="{_FitWidthOnLoad}"
						EncodeURI="{_EncodeURI}"
						FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}"
						ProgressiveLoading="{_ProgressiveLoading}"
						
						SearchMatchAll="{_SearchMatchAll}"
						PrintPaperAsBitmap="{_PrintPaperAsBitmap}"
						ViewModeToolsVisible="{_ViewModeToolsVisible}"
						ZoomToolsVisible="{_ZoomToolsVisible}"
						NavToolsVisible="{_NavToolsVisible}"
						CursorToolsVisible="{_CursorToolsVisible}"
						SearchToolsVisible="{_SearchToolsVisible}"
						locale="{_localeChain}"
						PrintEnabled="{_PrintEnabled}"
						/>
</mx:Application>

使用方法：

var fp = new FlexPaperViewer('divPDF',{ 
    			            	config : {
    			            		SwfFile :encodeURI(url+swf),
    			                    Scale : 0.6, 
    			                    ZoomTransition : 'easeOut',
    			                    ZoomTime : 0.5,
    			                    ZoomInterval : 0.1,
    			                    FitPageOnLoad : true,
    			                    FitWidthOnLoad : true,
    			                    PrintEnabled : false,
    			                    FullScreenAsMaxWindow : true,
    			                    ProgressiveLoading : true,
    			                    MinZoomSize : 0.2,
    			                    MaxZoomSize : 5,
    			                    SearchMatchAll : true,
    			                    InitViewMode : 'Portrait',
    			                    
    			                    ViewModeToolsVisible : true,
    			                    ZoomToolsVisible : true,
    			                    NavToolsVisible : true,
    			                    CursorToolsVisible : true,
    			                    SearchToolsVisible : true,
    			                    localeChain: 'zh_CN'
    			                }
    			            });

注：如果你没有修改过flexpaper_flash.js文件中的FlexPaperViewer()函数，请使用

var fp = new FlexPaperViewer(	
						 'FlexPaperViewer',
						 'divPDF', { config : {
						 SwfFile : escape('FusionCharts.swf'),
						 Scale : 0.6, 
						 ZoomTransition : 'easeOut',
						 ZoomTime : 0.5,
						 ZoomInterval : 0.2,
						 FitPageOnLoad : true,
						 FitWidthOnLoad : false,
						 FullScreenAsMaxWindow : false,
						 ProgressiveLoading : false,
						 MinZoomSize : 0.2,
						 MaxZoomSize : 5,
						 SearchMatchAll : false,
						 InitViewMode : 'Portrait',
						 PrintPaperAsBitmap : false,
						 ViewModeToolsVisible : true,
						 ZoomToolsVisible : true,
						 NavToolsVisible : true,
						 CursorToolsVisible : true,
						 SearchToolsVisible : true,  						
  						 localeChain: 'en_US'
						 
						 }});

divPDF为flexpaper渲染到的容器ID,FlexPaperViewer为你的swf文件名，笔者就把该参数去掉，直接在flexpaper_flash.js文件中定义。

版本二：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:fp="com.devaldi.controls.flexpaper.*"
				layout="absolute" width="100%" height="100%" 
				applicationComplete="initApp();">
	
	<mx:Script>
		<![CDATA[	
			
			[Bindable]
			public var _Scale:Number = 1;//缩放比例
			
			[Bindable]
			public var _EncodeURI:Boolean = true;
			
			[Bindable]
			public var _SwfFile:String = "";//SWF文件路径
			
			[Bindable]
			public var _ZoomTransition:String = "easeOut";
			
			[Bindable]
			public var _ZoomTime:Number = 0.6;
			
			[Bindable]
			public var _ZoomInterval:Number = 0.1;
			
			[Bindable]
			public var _MinZoomSize:Number = 0.3;
			
			[Bindable]
			public var _MaxZoomSize:Number = 5;
			
			[Bindable]
			public var _FitPageOnLoad:Boolean = false;//加载后适合高度
			
			[Bindable]
			public var _FitWidthOnLoad:Boolean = true;//加载后适合宽度
			
			[Bindable]
			public var _PrintEnabled:Boolean = false;//是否支持打印
			
			[Bindable]
			public var _FullScreenAsMaxWindow:Boolean = false;//是否支付全屏
			
			[Bindable]
			public var _ProgressiveLoading:Boolean = false;//是否延迟加载
			
			[Bindable]
			public var _localeChain:String = "zh_CN";//语言
			
			private var isFocus:Boolean = false;
			
			//初始化参数
			private function initApp():void{				
				_Scale = 1;
				_SwfFile = this.loaderInfo.parameters.url;
				_EncodeURI = true;
				_ZoomTransition = "easeOut";
				_ZoomTime = 0.6;
				_MinZoomSize = 0.2;
				_MaxZoomSize = 5;
				_ZoomInterval = 0.1;
				_FitPageOnLoad =false;
				_FitWidthOnLoad = true;
				_PrintEnabled = false;
				_FullScreenAsMaxWindow = false;
				_ProgressiveLoading = true;
				_localeChain ="zh_CN";//语言
				//注册事件监听
				this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
				this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
				
			}
			//---------------------------事件------------------------------

			private function onMouseOver(event:MouseEvent):void{
				this.isFocus = true;
			}
			
			private function onMouseOut(event:MouseEvent):void{
				this.isFocus = false;
			}
			
		]]>
	</mx:Script>
	<fp:FlexPaperViewer id="FlexPaper"
						width="100%" 
						height="100%" 
						
						Scale="{_Scale}" 
						SwfFile="{_SwfFile}" 
						ZoomTransition="{_ZoomTransition}" 
						ZoomTime="{_ZoomTime}" 
						MinZoomSize="{_MinZoomSize}"
						MaxZoomSize="{_MaxZoomSize}"
						ZoomInterval="{_ZoomInterval}"
						FitPageOnLoad="{_FitPageOnLoad}"
						FitWidthOnLoad="{_FitWidthOnLoad}"
						EncodeURI="{_EncodeURI}"
						FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}"
						ProgressiveLoading="{_ProgressiveLoading}" />
</mx:Application>


其中 this.loaderInfo.parameters.url  是获取加载该flash的地址参数，并非当前url地址的参数，这样修改主要目的是加载flexpaper时好传递参数。

第一种版本实现很简单，效果如下：



 第二种版本可直接在浏览器地址输入：http://192.168.1.100/Diyflexpaper_url.swf?url=1.swf

 注意，这里url地址可以是网络地址（只要有权限）、服务器存放swf地址。

效果如下

当然这种方式信息暴露太明显了，客户一看就知识用发什么东西，打开的地址等，所以我们可以单独编写一个html文件，打开文档即可。

 到此，文档上传并在线预览功能已全部总结完毕，欢迎阅者提出意见。

作者： kunoy
申明：作者写博是为了总结经验，和交流学习之用。
如需转载，请尽量保留此申明，并在文章页面明显位置给出原文连接。谢谢！

猜你喜欢

转载自blog.csdn.net/kunoy/article/details/8066959
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022