关于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）,视频没来得及整理，中文名称文件暂时有点问题凑活看吧！

PDF在线阅读 FlexPaper 惰性加载 ；的更多相关文章

  1. web版pdf在线阅读器

    近期论坛里有人提到了,在线pdf阅读器怎么做.我百度了一下,发现非常多人都非常懒.程序猿都非常懒吗? 答案是否定的. 为什么都不愿意去搜索一下呢.网上非常多答案的.我这里就列举一例.大家共勉. 看代码 ...

  2. Angular2 ng2 如何配置惰性加载

    需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...

  3. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

    jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...

  4. angular惰性加载拓展剖析

    最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-bet ...

  5. 关于angular5的惰性加载报错问题

    之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in prom ...

  6. Angular惰性加载的特性模块

    一:Angular-CLI建立应用 cmd命令:ng new lazy-app --routing    (创建一个名叫 lazy-app 的应用,而 --routing 标识生成了一个名叫 app- ...

  7. Django惰性加载和LazyObject

    看登录中间件的时候发现request.user返回的是SimpleOject对象,往下看翻到了LazyObject,看源码看了半天没看懂 网上搜了一堆资料了解下惰性加载实现是的什么功能,再回去看源码, ...

  8. javascript 性能惰性加载2016.12.13

    利用函数的惰性载入提高 javascript 代码性能 原文:利用函数的惰性载入提高javascript代码性能 作者:阿安 在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会 ...

  9. Android开发问题积累 <加载在线Gif><WebView无法加载网页图片>

    在线Gif加载 解决办法 Glide完美解决 Glide.with(context).load(pic).placeholder(R.drawable.loading).into(imageView) ...

随机推荐

  1. PLAN: step one

    1. 熟悉Unix/Linux Shell和常见的命令行  (start : 7.9 - end: 7.12) 1.文件系统结构和基本操作 ls/chmod/chown/rm/find/ln/cat/ ...

  2. 了解你的被测系统（why？）

    了解你的被测系统(why?)   如何做好系统集成测试[二.了解你的被测系统]   如果看完了第一篇文章,你的答案是Yes.我们可以继续讨论如何做系统集成测试啦. 了解你的被测系统(why?) 一如既 ...

  3. 园 首页 新随笔 联系 管理 订阅 订阅 RTSP协议转换RTMP直播协议

    RTSP协议转换RTMP直播协议 RTSP协议也是广泛使用的直播/点播流媒体协议,最近实现了一个RTSP协议转换RTMP直播协议的程序,为的是可以接收远端设备或服务器的多路RTSP直播数据,实时转换为 ...

  4. Pygame制作微信打飞机游戏PC版

    使用Pygame制作微信打飞机游戏PC版 转至:http://www.cnblogs.com/dukeleo/p/3339780.html   前一阵子看了一篇文章:青少年如何使用Python开始游戏 ...

  5. jQuery event的复制粘贴的坑

    jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...

  6. 《C++游戏开发》笔记十三 平滑过渡的战争迷雾(一) 原理：Warcraft3地形拼接算法

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9611887 作者:七十一雾央 新浪微博:http:/ ...

  7. 解决中文乱码（ jsp表单提交中文时出现乱码）

    有三种方法: 1.建立一个filter中文解决乱码 2.Struts2在struts.xml中修改默认的编码设定 3.用Spring解决中文乱码 4.直接在jsp中修改解决 1.建立一个filter解 ...

  8. 一步步学习Python-django开发-建立django数据库

    上篇文章建立了一个空的网站.现在我们要准备正式我们的网站开发咯.那么开发的第一步是啥呢?当然是要确定做什么网站了.每个人的开发习惯可能不尽相同,有点可能是从前端开始设计,有的可能是从数据库开始设计(不 ...

  9. [Ext JS 4] contentEL,renderTo, applyTo 释义与区别

    前言 若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS ...

  10. 搭建WEB邮件系统，爆强！

    Linux+postfix+extmail+dovecot打造基于web页面的邮件系统 原文地址: http://blog.csdn.net/deansrk/article/details/67177 ...