PDF在线阅读 FlexPaper 惰性加载 ；

时间：2023-11-23 15:24:08

关于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>

源码：下载 ；暂时只支持文档类型（不包括txt）,视频没来得及整理，中文名称文件暂时有点问题凑活看吧！

相关文章