zoukankan      html  css  js  c++  java
  • 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{ 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="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),视频没来得及整理,中文名称文件暂时有点问题凑活看吧!

  • 相关阅读:
    centos7.6 安装与配置 MongoDB yum方式
    MongoDB 介绍
    centos 关闭selinux
    前端 HTML标签属性
    前端 HTML 标签嵌套规则
    前端 HTML 标签分类
    前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍
    前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类
    前端 HTML form表单标签 select标签 option 下拉框
    POJ 1426
  • 原文地址:https://www.cnblogs.com/happy-rabbit/p/4850066.html
Copyright © 2011-2022 走看看