PDF在线阅读 FlexPaper 惰性加载 ;
关于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),视频没来得及整理,中文名称文件暂时有点问题凑活看吧!