文档章节

仿百度文库解决方案(五)-flexpaper实现文档的在线预览

行走的思想者
 行走的思想者
发布于 2016/04/01 17:01
字数 1165
阅读 46
收藏 0

            在把文档的格式转换成swf格式以后,现在该实现在线的预览。 在线预览的方法有两种方式。 第一种: 通过flashpaper实现文档的在线预览。第二种是通过flexpaper实现文档的在线预览。 在博客中用到的是第二种方法。 在这里我们来了解一下是什么是flexpaper。

     1  Flexpaper的简介

     FlexPaper是一个被设计用来与PDF2SWF一起使用,开源轻量级的在浏览器上显示各种文档的组件, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持。它可以被当做Flex的库来使用。也可以通过将一些例如Word、PPT等文档转成PDF,然后实现在线浏览。

      本文用到的flexpaper的版本是:FlexPaper_1.4.5_flash,

     下载的地址:http://download.csdn.net/download/yali1990515/4443796

      下载之后直接加压就可以了,下面是解压之后的文件截图:

      

    

      主要文件,文件夹说明:

  • examples文件夹:存放FlexPaper使用的例子

  • js文件夹:存放FlexPaper调用的js文件

  • php文件夹:存放php使用FlexPaper的例子

  • index.html:例子主页

  • FlexPaperViewer.swf:FlexPaper的核心文件

  • playerProductInstall.swf:如果客户端浏览器的flashplayer版本过低,将嵌入此swf文件

        2 Flexpaper的参数含义

            
  • SwfFile (String)需要使用Flexpaper打开的文档

    Scale (Number)初始化缩放比例,参数值应该是大于零的整数

    ZoomTransition (String) Flexpaper中缩放样式,它使用和Tweener一样的样式,默认参数值为easeOut.其他可选值包括: easenone, easeout, linear, easeoutquad

    ZoomTime (Number)从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。

    ZoomInterval (Number)缩放比例之间间隔,默认值为0.1,该值为正数。

    FitPageOnLoad (Boolean)初始化得时候自适应页面,与使用工具栏上的适应页面按钮同样的效果。

    FitWidthOnLoad (Boolean)初始化的时候自适应页面宽度,与工具栏上的适应宽度按钮同样的效果。

    localeChain (String)设置地区(语言),目前支持以下语言。

        en_US (English)

        fr_FR (French)

        zh_CN (Chinese, Simple)

        es_ES (Spanish)

        pt_BR (Brazilian Portugese)

        ru_RU (Russian)

        fi_FN (Finnish)

        de_DE (German)

        nl_NL (Netherlands)

        tr_TR (Turkish)

        se_SE (Swedish)

        pt_PT (Portugese)

        el_EL (Greek)

        da_DN (Danish)

        cz_CS (Czech)

        it_IT (Italian)

        pl_PL (Polish)

        pv_FN (Finnish)

        hu_HU (Hungarian)

    FullScreenAsMaxWindow (Boolean)当设置为true的时候,单击全屏按钮会打开一个flexpaper最大化的新窗口而不是全屏,当由于flash播放器因为安全而禁止全屏,而使用flexpaper作为独立的flash播放器的时候设置为true是个优先选择。

    ProgressiveLoading (Boolean)当设置为true的时候,展示文档时不会加载完整个文档,而是逐步加载,但是需要将文档转化为9以上的flash版本(使用pdf2swf的时候使用-T 9 标签)。

    MaxZoomSize (Number)设置最大的缩放比例。

    MinZoomSize (Number)最小的缩放比例。

    SearchMatchAll (Boolean)设置为true的时候,单击搜索所有符合条件的地方高亮显示。

    InitViewMode (String)设置启动模式如"Portrait" or "TwoPage".

    ViewModeToolsVisible (Boolean)工具栏上是否显示样式选择框。

    ZoomToolsVisible (Boolean)工具栏上是否显示缩放工具。

    NavToolsVisible (Boolean)工具栏上是否显示导航工具。

    CursorToolsVisible (Boolean)工具栏上是否显示光标工具。

    SearchToolsVisible (Boolean)工具栏上是否显示搜索

     
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
            3 flexpaper的使用例子
        
<%@ 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>


		<title>文档显示页面</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<style type="text/css" media="screen">
html,body {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	overflow: auto;
}

#flashContent {
	display: none;
}
</style>

		<script type="text/javascript" src="js/flexpaper_flash.js">
</script>
	</head>

	<body>
	<div>
	<br/><Br/><br/>
	</div>
		<div style="position:absolute;left:200px;top:10px;">
	        <a id="viewerPlaceHolder" style="width:650px;height:700px;display:block"></a>
	        
	        <script type="text/javascript">
	     		var fp = new FlexPaperViewer(	
						 'FlexPaperViewer',
						 'viewerPlaceHolder', { config : {
						 SwfFile : escape('http://localhost:8080/Test/swf/1.swf'),
						 Scale : 0.8, 
						 ZoomTransition : 'easeOut',
						 ZoomTime : 0.5,
						 ZoomInterval : 0.2,
						 FitPageOnLoad : true,
						 FitWidthOnLoad : false,
						 PrintEnabled : false,
						 FullScreenAsMaxWindow : false,
						 ProgressiveLoading : true,
						 MinZoomSize : 0.2,
						 MaxZoomSize : 5,
						 SearchMatchAll : false,
						 InitViewMode : 'Portrait',
						 
						 ViewModeToolsVisible : true,
						 ZoomToolsVisible : true,
						 NavToolsVisible : true,
						 CursorToolsVisible : true,
						 SearchToolsVisible : true,
  						
  						 localeChain: 'zh_CN'
						 }});
	        </script>
        </div>
	</body>
</html>
           在这里的测试的时候把页面建在了于flexpaper的根目录下,这样只是为了方便测试,不是一定要放在同一个目录下。下面是文件放在的位置和效果预览图。
        
           效果图:
          
 
 
             页面显示的效果是因为在pdf转换时出现的乱码,在这里不处理,下一篇博客会针对乱码的处理。
 
 
 
 
 
 
 
 
 

© 著作权归作者所有

行走的思想者
粉丝 0
博文 15
码字总数 35851
作品 0
济南
私信 提问
txt word ppt xls pdf等在线浏览怎么实现?提取封面图又是怎么搞?

刚入职就碰到这个需求,有客户想仿百度文库。 在线浏览我看了下大概是 用flexpaper和 swftools,先将其他格式文档转换为pdf,再flexpaper预览。 然后想问: 1.怎么实现预览页数上限? 2.怎么...

吾爱
2013/11/13
275
2
如何为 Drupal 站点添加在线电子书阅读功能

像 Google Book 和 百度文库 那样的文档在线阅读功能非常实用,要想为 Drupal 站点实现这样的文档在线阅读功能,可以通过 SWF Tools 模块来实现。 A. 启用并配置 SWF Tools 和 FlexPaper 首先...

芒果龙
2011/10/19
366
0
FlexPaper+SwfTools实现的在线文档功能

最近一个项目需要实现一个在线浏览文档的功能。准备使用FlexPaper配合Pdf2Swf实现。 主要需求在于: ➔ 文档页数很多,少则几百页,多则上千页。 ➔ 相应的文档大小也在50MB以上。 根据需求,...

长平狐
2012/11/06
3.8K
4
Java+FlexPaper+swfTools仿文库文档在线阅读

一、文档在线阅读思路 1.用OpenOffice把PPT、Word、Excel、Text转换为pdf 2.用SWFTool将生成的pdf转换成swf,然后利用FlexPlayer实现在线预览播放 二、准备工作 1.安装OpenOffice,官网下载地...

StephenZou
2013/07/13
13.6K
34
windows下仿百度文库实现在线文档浏览

windows下开发仿百度的功能相对简单一些。只是java代码调用服务器windows上安装的软件,将doc等文件转化为swf文件。 由于在开发环境下flashpaper不支持64位的系统,所以用print2flash代替fla...

Bingo许
2014/02/19
419
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
133
8
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0
详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景

箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深... 普通函数和...

OBKoro1
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部