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

  • 相关阅读:
    httprunner运行报错问题:base url missed
    Locust性能模块浅谈
    如何对HTMLTestRunner 进行输出print 进行修改
    网易UI自动化测试工具Airtest中导入air文件中的方法
    如何在 idea 2019.3.4 中导入Github的项目并使用Git同步项目?
    Win10 Microsoft Store 微软商店 Error 0x00000193 解决方法
    读书笔记 |《计算机组成结构化方法》-01
    [MR] MapReduce 总结、回顾与吐槽
    [Git] 极简Git——关于Git的简要回顾
    [FlyWay] FlyWay工作原理
  • 原文地址:https://www.cnblogs.com/happy-rabbit/p/4850066.html
Copyright © 2011-2022 走看看