码迷,mamicode.com
首页 > 其他好文 > 详细

PDF在线阅读 FlexPaper 惰性加载 ;

时间:2015-09-30 19:31:51      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:

关于PDF在线阅读问题,比较普遍的做法是转换成swf文件来浏览;由于项目需要,就用 flexpaper 来实现了下,功能比较简单;但是文件的惰性加载确实让笔者挠头了一把!

下面是笔者的方法: 采用流的方式来读取每一页的swf文件,然后展示(pdf转换成多个swf文件网上一大把);亲自测试,100M的pdf文档,转换后在线浏览,延迟不超过1s;

JSP页面 :

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>在线阅读</title> <style> .box{ width: 99%; height: 500px; border: 1px solid #CCC; margin: 10px auto; } </style> <script type="text/javascript" src="<%=basePath%>common/js/jquery-1.7.min.js"></script> <script type="text/javascript" src="<%=basePath%>common/js/flexpaper/flexpaper_flash.js" ></script> <script type="text/javascript" src="<%=basePath%>common/js/pdf2swf.js" ></script> <script> var basePath = "<%=basePath%>"; // var bh = "${zy.id}";//资源编号 // var nwpg = "${nowPg}";//资源当前页数 var bh = "0020150929000008"; //测试用的资源编号(也是物理文件名称) var nwpg = "1";//默认从第一页开始加载 $(function(){ var url = null; url = basePath+"flexpaper?bh="+bh+nwpg+"{[*,0],100}"; pdf2swf(url); }); </script> </head> <body> <div class="box" > <div id="viewerPlaceHolder" style="width:100%;height:100%;display:block"></div> </div> </body> </html>

 JAVA后台代码:

package com.zwc.servlet;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FlexPaperServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            doPost(request,response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String bh = request.getParameter("bh");//该bh为 bh+ nwpg;资源编号+当前页数
        
        String path= bh+".swf";
        String swfdir = "D:/data/zypt/swf/";//获得文件夹路径
        
        File f = new File(swfdir+path);//拿到当前页面文件
        FileInputStream fis = null;
        OutputStream out = null ;
        try {
            response.setContentType("application/x-shockwave-flash");
            response.setHeader("Accept-Ranges", "bytes");        
            fis = new FileInputStream(f) ;
            out = new BufferedOutputStream(response.getOutputStream());
            byte[] bytes = new byte[(int) f.length()];
            response.setContentLength(bytes.length);
            fis.read(bytes) ;
            fis.close() ;
            out.write(bytes) ;
            out.flush() ;
        }catch (Exception e) {
        }finally{
            if(null != out){
                out.close();
            }
        }
    }
}

 WEB.xml文件Servlet配置:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>FlexPaperServlet</servlet-name>
    <servlet-class>com.zwc.servlet.FlexPaperServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>FlexPaperServlet</servlet-name>
    <url-pattern>/flexpaper</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

pdf2swf.js代码:

function pdf2swf(url){
    var p = new FlexPaperViewer(
             basePath+‘common/js/flexpaper/FlexPaperViewer‘,
             ‘viewerPlaceHolder‘, 
             {config :
                 {
                     SwfFile:encodeURI(url),
                     Scale :1.0,
                     ZoomTransition : ‘easeOut‘,
                     ZoomTime : 0.5,
                     ZoomInterval : 0.2,
                     FitPageOnLoad : false,
                     FitWidthOnLoad : false,
                     FullScreenAsMaxWindow : true,
                     ProgressiveLoading : true,
                     MinZoomSize : 0.2,
                     MaxZoomSize : 5,
                     SearchMatchAll : false,
                     StartAtPage : nwpg,
                     InitViewMode : ‘Portrait‘,
                     ViewModeToolsVisible : true,
                     ZoomToolsVisible : true,
                     NavToolsVisible : true,
                     CursorToolsVisible : true,
                     SearchToolsVisible : true,                          
//                     localeChain: ‘en_US‘
                     localeChain: ‘zh_CN‘,
                 }
               }
             );
}

 

 

jsp所需js文件:

  <script type="text/javascript" src="<%=basePath%>common/js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>common/js/flexpaper/flexpaper_flash.js" ></script>
    <script type="text/javascript" src="<%=basePath%>common/js/pdf2swf.js" ></script>

PDF在线阅读 FlexPaper 惰性加载 ;

标签:

原文地址:http://www.cnblogs.com/happy-rabbit/p/4850066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!