(六)java实现文档的在线浏览-flexpaper在线浏览swf文档

最新推荐文章于 2024-09-12 10:58:48 发布

Mrs陶

最新推荐文章于 2024-09-12 10:58:48 发布

阅读量2.6k

点赞数

分类专栏： J2EE 文章标签： FlexPaper

本文链接：https://blog.csdn.net/u012454773/article/details/46119649

版权

J2EE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件，被设计用来与PDF2SWF一起使用，

使在Flex中显示PDF成为可能，而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。

另外你也可以通过将一些例如Word、PPT等文档转成PDF，然后实现在线浏览。

使用过程如下：

1、下载FlexPaper，建议与本文使用版本一致，本文使用FlexPaper_2.2.1，其中目录结构如下所示。

根据自己项目需求做相应的调整，此处我们使用java，所以读者可以先将java文件夹中的FlexPaper.war放进tomcat，

在地址栏输入:http://localhost:8080/FlexPaper/index.jsp

进行FlexPaper配置，然后在管理员界面上传pdf文档，点击文档名进行预览，查看java中实现在线预览文档效果，具体实现代码可通过审查元素查看。

2、项目中使用FlexPaper，将下载下来的FlexPaper_2.2.1文件夹拷贝到项目下，根据自己需求定制一下，本文中项目结构如下：

3、在index.jsp中编写测试代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 第一步：引入jQuery文件以及flexpaper支持文件 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/FlexPaper/css/flexpaper.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/FlexPaper/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/FlexPaper/js/flexpaper.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/FlexPaper/js/flexpaper_handlers.js"></script>
</head>
<body>
  <!-- 设置 -->
  <div id="documentViewer" class="flexpaper_viewer" style="position:absolute;left:0px;top:0px;width:100%;height:80%">loading document... </div>
            <script type="text/javascript">   
            $('#documentViewer').FlexPaperViewer(
                    { config : {
                        SWFFile : '${pageContext.request.contextPath}/swf/1.swf',
                        Scale : 0.6,
                        ZoomTransition : 'easeOut',
                        ZoomTime : 0.5,
                        ZoomInterval : 0.2,
                        FitPageOnLoad : true,
                        FitWidthOnLoad : false,
                        FullScreenAsMaxWindow : false,
                        ProgressiveLoading : false,
                        MinZoomSize : 0.2,
                        MaxZoomSize : 5,
                        SearchMatchAll : false,
                        InitViewMode : 'Portrait',
                        RenderingOrder : 'flash',
                        StartAtPage : '',

                        ViewModeToolsVisible : true,
                        ZoomToolsVisible : true,
                        NavToolsVisible : true,
                        CursorToolsVisible : true,
                        SearchToolsVisible : true,
                        jsDirectory:'${pageContext.request.contextPath}/FlexPaper',//根据自己项目设置
                        WMode : 'window',
                        localeChain: 'en_US'
                    }}
            );

            </script>
</body>
</html>

此时，运行服务器，访问index.jsp便可看到效果。