关于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. 定义 ICache 接口，以及实现默认的 ASP.NET 缓存机制

    本文定义 ICache 接口,以及实现默认的 ASP.NET 缓存机制(即通过 System.Web.Caching.Cache)来缓存,将来也可以通过扩展,替换默认实现. 下面直接贴代码了: ICa ...

  2. Django数据库迁移

    如果你用过Django的数据库就会发现一个比较令人纠结的地方:数据库更改. 我们知道添加或者删除一个models.Model 需要在数据库里相应的操作,这需要我们进入数据库命令行手动添加或删除,因为s ...

  3. 如何在数据库中存储IP地址

    最近改一个比较老的web系统,该系统是通过账号或者ip地址(白名单)验证限制访问权限的. 由于运营的时间比较长了,发现进入网站巨卡... 原因就是:之前的数据库(sqlserver)存储ip地址是用的 ...

  4. github上写个人简历

    随笔- 70  文章- 0  评论- 567  在github上写个人简历——先弄个主页   起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话 ...

  5. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  6. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  7. 图解Javascript之Function

    好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!

  8. 【Hook技术】实现从"任务管理器"中保护进程不被关闭 + 附带源码 + 进程保护知识扩展

    [Hook技术]实现从"任务管理器"中保护进程不被关闭 + 附带源码 + 进程保护知识扩展 公司有个监控程序涉及到进程的保护问题,需要避免用户通过任务管理器结束掉监控进程,这里使用 ...

  9. Windows7和Archlinux双系统硬盘安装笔记

    俗话说,好记性不如烂笔头,这些东西也都是我Google来的,做个笔记以后自己安装也方便些. 因为官方wiki的Beginners' Guide讲的非常好,大部分步骤按照wiki一步一步来就好了,这里只 ...

  10. kindeditor图片上传 struts2实现

    一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\js ...