基于Angularjs框架实现HTML5在线查看OFD文件

我们在系统开发过程中，经常会遇到图片浏览，PDF，OFD文件浏览问题。

最近正需要开发此功能，在线查看OFD文件。查阅各种资料发现，其实OFD和PDF是同一类型文件，OFD就是中国版本的PDF。

下面，我就具体说说，如何实现OFD文件在线查看，先上效果图：

 OFD文件支持印章，目前税务系统应用较多。

首先，下载一个文件ofd.js，然后设计前端显示模板，如下：

http://www.daytime.cc



  


    

      

        
          Open
        

        
          Print
        

        
          Download
        

        
          Current View
        

        


        
          Go to First Page
        
        
          Go to Last Page
        

        


        
          Rotate Clockwise
        
        
          Rotate Counterclockwise
        

        


        

          
            Text Selection Tool
          
          
            Hand Tool
          
        

        


        

          
            Page Scrolling
          
          
            Vertical Scrolling
          
          
            Horizontal Scrolling
          
          
            Wrapped Scrolling
          
        

        


        

          
            No Spreads
          
          
            Odd Spreads
          
          
            Even Spreads
          
        

        


        
          Document Properties…
        
      
    
  

    

      

        

          

            

              
                Previous
              
              

              
                Next
              
            
            
            
          
          


            
              Open
            

            
              Print
            

            
              Download
            

            


            
              Tools
            
          
          

            

              
                Zoom Out
              
              

              
                Zoom In
              
            
            
                  
                    Automatic Zoom
                    Actual Size
                    Page Fit
                    Page Width
                    50%
                    75%
                    100%
                    125%
                    150%
                    200%
                    300%
                    400%
                  
                
          
        
      
    

    

      

    

    
    
    
  
 

  

    

      

        File name:
        
-
      
      

        File size:
        
-
      
      

      

        Title:
        
-
      
      

        Author:
        
-
      
      

        Subject:
        
-
      
      

        Keywords:
        
-
      
      

        Creation Date:
        
-
      
      

        Modification Date:
        
-
      
      

        Creator:
        
-
      
      

      

        OFD Producer:
        
-
      
      

        OFD Version:
        
-
      
      

        Page Count:
        
-
      
      

        Page Size:
        
-
      
      

      
      

        Close
      
    
    
    

      

        Preparing document for printing…
      
      

        
        0%
      
      

        Cancel
      
    

    

      

        签章人:
        
-
      
      

        签章提供者:
        
-
      
      

        原文摘要值:
        
-
      
      

        签名值:
        
-
      
      

        签名算法:
        
-
      
      

        版本号:
        
-
      
      

        验签结果:
        
-
      
      

      

        印章标识:
        
-
      
      

        印章名称:
        
-
      
      

        印章类型:
        
-
      
      

        有效时间:
        
-
      
      

        制章日期:
        
-
      
      

        印章版本:
        
-
      
      

        Close
      
    
    
    
    
    
  
  
 

然后添加JS实现代码：

/**
 @Name：OFD文档浏览器
 @Author：www.daytime.cc    
 */
layui.define(['element'], function (exports) {	
	var winid = 'ofdViewer';
	var player, $win, OFDHandler;

	app.controller(winid+'Ctrl', ['$scope', '$timeout', function($scope, $timeout) {

		$scope.info = {
			'scalesel':'auto',
			'scale':1.0
		};

		$scope.initWinDailog = function(){
			var file = layer.openWins[winid].file;
			OFDHandler = renderOFDContent(file.url);
		}

		$scope.ZoomOut = function(){
			var scale = Number($scope.info.scale) - 0.1;
			if(scale<0.3)scale = 0.3;
			$scope.info.scale = scale;
			setScale();
		}

		$scope.ZoomIn = function(){
			var scale = Number($scope.info.scale) + 0.1;
			if(scale>10.0)scale = 10.0;
			$scope.info.scale = scale;
			setScale();
		}

		$(window).on("resizeLayxWindow"+winid, function(){
			$scope.PageScale();
		});

	}]);

	var createDailog = function(param){
		var file = layer.openWins[winid].file;
		if(!file)return;
		$.get('ofdviewer/index.html', {}, function (content) {
			var winForm = layer.open({
				id:winid,
				title: 'OFD文档阅读器',
				storeStatus:false,
				width:900,
				height:600,
				minWidth:400,
				minHeight:300,
				alwaysOnTop:false,
				icon:'',
				content: content,
				event:{
				}
			});
		});
	}

	createDailog();

	exports('apps/office/ofdviewer/main', ofdviewer);

});

这个OFD文件在线浏览器目前在我们开发的考勤系统中稳定使用中，效果非常good，上效果：