FlexPaper的深入了解和应用

最近做项目需要用到flexpaper，所以想借此机会好好的研究一下。

这是官方的下载地址：http://flexpaper.devaldi.com/download/，flexpaper是一款付费的软件，它有免费版本但是有限制的（浏览时会显示flexpaper的logo并且限制只能浏览10页）。当然网上有许多破解版本可以使用网上很容易找到。我们公司项目会用到正版但还没有到位，所以本文是以试用版本（有限制的）来研究的。话不多说我们开始。

首先我做的是web项目所以下载时选择ASP.NET/PHP/Java选项

接下来是下载的部分，我们可以看到有PDF2JSON、PDFTk、SWFTOOLS，这三个是PDF文件的转换工具我们一并下载。Zine/Classic是flexpaper的不同版本他们在具体样式上也有所不同，具体的可以在官网的examples上看到。我们这里下载Classic，因为这个版本是可以添加标签和注解的。

下载完我们可以看到它的目录结构，我们需要的是css、js、locale、FlexPaperViewer.swf以及UI_开头的html文件

接下来我们新建一个web项目，把css、images、js、FlexPaperViewer.swf、UI_开头的html导入项目，建立docs和pdf文件夹把转换好的格式文件放进去

至于pdf文件的转换我值写出控制台的命令就不再这里细说了：

pdf转换成单个swf文件

pdf2swf.exe H:\Paper.pdf -o H:\Paper.swf -f -T 9 -t -s storeallcharacters -s linknameurl

pdf按页转换成带页号的swf文件（pdf名_页号.swf）

pdf2swf.exe H:\Paper.pdf -o H:\pages\Paper_%.swf -f -T 9 -t -s storeallcharacters -s linknameurl

pdf转换成单个json文件

pdf2json.exe H:\Paper.pdf -enc UTF-8 -compress H:\Paper.js

pdf按页转换成带页号的js文件（pdf名_页号.js）

pdf2json.exe H:\Paper.pdf -enc UTF-8 -compress -split 28 H:\pages\Paper_%.js

把pdf按页分割

pdftk.exe H:\Paper.pdf burst output H:\pages\Paper_%02d.pdf compress

以上就是转换命令了，只要打开相应的exe文件所在的目录SHIFT+右键打开命令行，修改成自己要转换的文件跟路径就可以了。

接下来就是关键的页面了

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<title>flexpaper_demo</title>

<meta content="charset=utf-8">

<link rel="stylesheet" type="text/css" href="/css/flexpaper.css" />

<script type="text/javascript" src="/js/jquery.min.js"></script>

<script type="text/javascript" src="/js/jquery.extensions.min.js"></script>

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

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

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

</head>

<body>

    <div id="documentViewer" class="flexpaper_viewer"

        style="position: absolute; left: 10px; top: 10px; width: 800px; height: 500px"></div>

    <script type="text/javascript">

        //判断是否是触屏（移动设备）

        $.get((!window.isTouchScreen) ? '/UI_flexpaper_desktop_flat.html'

                : '/UI_flexpaper_mobile_flat.html', function(toolbarData) {

            $('#documentViewer').FlexPaperViewer({

                config : {

                    //swf文件的分页模式

                    //SwfFile : "/flex/view/{Paper_[*,0].swf,28}",

                    //单swf文件模式

                    SwfFile : "/flex/view?name=Paper.swf",

                    //JSONFile : '/flex/view?name=Paper.js',

                    //pdf文件模式

                    //PDFFile : '/flex/view?name=Paper.pdf',

                    //初始缩放比例

                    Scale : 0.6,

                    //变焦模式一般都是'easeOut'

                    ZoomTransition : 'easeOut',

                    //变焦速度

                    ZoomTime : 0.5,

                    //变焦间隔

                    ZoomInterval : 0.2,

                    ///适应加载

                    FitPageOnLoad : true,

                    //适应宽度加载

                    FitWidthOnLoad : false,

                    FullScreenAsMaxWindow : false,

                    ProgressiveLoading : true,

                    //最小比例

                    MinZoomSize : 0.2,

                    //做大比例

                    MaxZoomSize : 5,

                    SearchMatchAll : true,

                    //切换显示模式：Two Page双页/Portrait单页

                    InitViewMode : 'Portrait',

                    //加载方式

                    RenderingOrder : 'flash',

                    //显示模式(单/双页)按钮

                    ViewModeToolsVisible : true,

                    //缩放条

                    ZoomToolsVisible : true,

                    //页面跳转框

                    NavToolsVisible : true,

                    //焦点按钮

                    CursorToolsVisible : true,

                    //搜索栏

                    SearchToolsVisible : true,

                    //通过请求的方式获取的导航栏（响应式）

                    Toolbar : toolbarData,

                    //底部工具栏（用于注释的添加删除等）

                    BottomToolbar : '/UI_flexpaper_annotations.html',

                    WMode : 'window',

                    //按钮提示语言

                    localeChain : "zh_CN",

                }

            });

        });

    </script>

</body>

</html>

前台好了现在是后台，定义一个工具类

package com.demo.util;  

import java.io.File;

import java.io.FileInputStream;  

public class FlexPaperUtil {  

    /**

     * 以二进制形式获取文件内容

     *

     * @param filePath

     *            文件路径

     * @return

     */  

    public static byte[] file_get_contents(String filePath) {

        byte[] con = { 0 };

        // 判断路径是否为空

        if (filePath == null || filePath == "")

            return con;

        try {

            File f = new File(filePath);

            // 判断是否为文件及是否可读

            if (!f.isFile() || !f.canRead())

                return con;

            FileInputStream fstream = new FileInputStream(filePath);

            con = new byte[(int) f.length()];

            fstream.read(con);

            fstream.close();

        } catch (Exception e) {

            e.printStackTrace();

        }

        return con;

    }

}

定义一个controller

package com.demo.web;  

import java.io.*;  

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;  

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;  

import com.demo.util.FlexPaperUtil;  

@Controller

public class FlexController {  

    @RequestMapping(value = "/flex")

    public String flex(HttpServletRequest request, HttpServletResponse response) {

        return "flexpaper";

    }  

    @RequestMapping(value = "/flex/view/{name}")

    public void view(HttpServletRequest request, HttpServletResponse response, @PathVariable String name)

            throws IOException {

        BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());

        String mySwfFilePath = request.getSession().getServletContext().getRealPath("/") + "\\docs\\pages\\" + name

                + ".swf";

        System.out.println(mySwfFilePath);

        byte[] content = FlexPaperUtil.file_get_contents(mySwfFilePath);

        response.setContentLength(content.length);

        outs.write(content);

        outs.flush();

        outs.close();

    }  

    @RequestMapping(value = "/flex/view")

    public void view2(HttpServletRequest request, HttpServletResponse response, @RequestParam String name)

            throws IOException {

        String dir = "";

        if (name.contains("pdf")) {

            dir = "\\pdf\\";

        } else {

            dir = "\\docs\\";

        }

        BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());

        String mySwfFilePath = request.getSession().getServletContext().getRealPath("/") + dir + name;

        System.out.println(mySwfFilePath);

        byte[] content = FlexPaperUtil.file_get_contents(mySwfFilePath);

        response.setContentLength(content.length);

        //弹出错误对话框

        // outs.write("Error:aaa".getBytes());

        outs.write(content);

        outs.flush();

        outs.close();

    }

}

运行后的结果

接下来是通用api：

页数跳转：

$FlexPaper("documentViewer").gotoPage(5);

适应控件宽度：

$FlexPaper("documentViewer").fitWidth();

适应控件高度：

$FlexPaper("documentViewer").fitHeight();

获取当前页数：

$FlexPaper("documentViewer").getCurrPage();

打印：

$FlexPaper("documentViewer").printPaper();

下一页：

$FlexPaper("documentViewer").nextPage();

上一页：

$FlexPaper("documentViewer").prevPage();

搜索：

$FlexPaper("documentViewer").searchText("");

切换显示模式：Two Page双页/Portrait单页

$FlexPaper("documentViewer").switchMode("Portrait");

==============================================================================================

最后是注释的api：

添加高亮：

$FlexPaper("documentViewer").addMark({

　　　　id : "1",

　　　　type : "highlight",

　　　　pageIndex : 1,

　　　　displayFormat : "flash",

　　　　readonly : false,

　　　　selection_text : "The UK",

　　　　selection_info : "1;0;5",

　　　　color : "#c2f785",

});

为高亮部分添加注释：不知道什么原因要运行两次才能出现注释框

$FlexPaper("documentViewer").addMark({

　　　　id : "2",

　　　　type : "highlight",

　　　　pageIndex : 1,

　　　　displayFormat : "flash",

　　　　readonly : false,

　　　　has_selection : true,

　　　　selection_text : "The UK",

　　　　selection_info : "1;0;5",

　　　　note : "这是注释",

　　　　color : "#c2f785",

　　　　//注释框顶点坐标

　　　　positionX : 350,

　　　　positionY : 150,

　　　　//注释框尺寸

　　　　width : 200,

　　　　height : 200

});

在指定点插入注释：

$FlexPaper("documentViewer").addMark({

　　　　id : "3",

　　　　type : "note",

　　　　pageIndex : 1,

　　　　displayFormat : "flash",

　　　　readonly : false,

　　　　//注释框是否收起

　　　　collapsed : false,

　　　　note : "这是注释",

　　　　points : "100,10",

　　　　//注释框顶点坐标

　　　　positionX : 100,

　　　　positionY : 150,

　　　　//注释框尺寸

　　　　width : 200,

　　　　height : 200,

});

框选指定区域插入注释：

$FlexPaper("documentViewer").addMark({

　　　　id : "4",

　　　　type : "drawing",

　　　　pageIndex : 1,

　　　　displayFormat : "flash",

　　　　note : "这是注释",

　　　　//框选区域的顶点坐标和对角点坐标

　　　　points : "10,10:200,150",

　　　　color : "#c2f785",

　　　　//注释框顶点坐标

　　　　positionX : 350,

　　　　positionY : 150,

　　　　//注释框尺寸

　　　　width : 200,

　　　　height : 200,

});

添加涂鸦：这个点会比较多

$FlexPaper("documentViewer").addMark({

　　id : "5",

　　type : "drawing",

　　pageIndex : 1,

　　displayFormat : "flash",

　　points : "91.55766944114157,174.79191438763377:85,174:82,174:82,168:76,

　　　　　　　　168:74,168:68,168:65,168:59,168:56,168:50,168:47,168:41,168:38,

　　　　　　　　168:32,168:29,168:23,168:23,174:23,177:20,177:20,183:20,186:20,

　　　　　　　　192:20,195:20,201:20,204:20,210:20,213:20,219:23,219:23,222:23,

　　　　　　　　228:29,228:29,231:29,237:32,237:32,240:32,245:38,245:38,248:38,

　　　　　　　　254:41,254:47,254:47,257:50,257:50,263:56,263:59,263:65,263:65,

　　　　　　　　266:68,266:74,266:74,272:76,272:82,272:85,272:91,272:94,272:94,

　　　　　　　　275:100,275:103,275:109,275:112,275:118,275:121,275:127,275:130,

　　　　　　　　275:136,275:139,275:139,281:145,281:148,281:154,281:157,281:162,

　　　　　　　　281:165,281:171,281:174,281:180,281:180,275:183,275:189,275:192,

　　　　　　　　275:198,275:198,272:201,272:207,272:210,272:216,272:216,266:219,

　　　　　　　　266:219,263:225,263:225,257:225,254:225,248:225,245:225,240:225,

　　　　　　　　237:225,231:225,228:225,222:225,219:225,213:225,210:219,210:219,

　　　　　　　　204:216,204:216,201:210,201:207,201:207,195:201,195:198,195:198,

　　　　　　　　192:192,192:189,192:183,192:180,192:180,186:174,186:171,186:171,

　　　　　　　　183:165,183:162,183:157,183:154,183:148,183:145,183:145,177:139,

　　　　　　　　177:139,174:136,174:130,174:127,174:121,174:118,174:112,174:109,

　　　　　　　　174:103,174:100,174:94,174:91,174",

　　color : "#FA1100",

});

最后是获取当前页的所有注释：可以根据下面的属性把注释存入数据库

var marks = $FlexPaper('documentViewer').getMarkList();

　　for (var i = 0; i < marks.length; i++) {

　　　　console.log("id:" + marks[i].id);

　　　　console.log("type：" + marks[i].type);

　　　　console.log("pageIndex：" + marks[i].pageIndex);

　　　　console.log("displayFormat：" + marks[i].displayFormat);

　　　　console.log("readonly：" + marks[i].readonly);

　　　　console.log("collapsed：" + marks[i].collapsed);

　　　　console.log("has_selection：" + marks[i].has_selection);

　　　　console.log("selection_text：" + marks[i].selection_text);

　　　　console.log("selection_info：" + marks[i].selection_info);

　　　　console.log("note：" + marks[i].note);

　　　　console.log("points：" + marks[i].points);

　　　　console.log("color：" + marks[i].color);

　　　　console.log("positionX：" + marks[i].positionX);

　　　　console.log("positionY：" + marks[i].positionY);

　　　　console.log("width：" + marks[i].width);

　　　　console.log("height：" + marks[i].height);

}

FlexPaper的深入了解和应用的更多相关文章

使用FlexPaper实现office文件的预览(C#版)
需求很简单,用户上传office文件(word.excel.ppt)后,可以预览上传的这些文件.搜索的相关的资料后.整理如下: Step1.用户上传office文件. Step2.把Office文件转 ...
FlexPaper+SWFTool+操作类=在线预览PDF
引言由于客户有在线预览PDF格式的需求,在网上找了一下解决方案,觉得FlexPaper用起来还是挺方便的,flexpaper是将pdf转换为swf格式的文件预览的,所以flexpaper一般和swf ...
Java+FlexPaper+swfTools仿百度文库文档在线预览系统设计与实现
笔者最近在给客户开发文档管理系统时,客户要求上传到管理系统的文档(包括ppt,word,excel,txt)只能预览不允许下载.笔者想到了百度文库和豆丁网,百度文库和豆丁网的在线预览都是利用flash ...
FlexPaper使用小结
FlexPaper相关介绍及后台swf生成,参见 FlexPaper实现文档在线浏览(附源码) 前台swf在flash中的预览: 1.下载相关文档 FlexPaper Classic 2.将下载的文件 ...
FlexPaper 2.2.1介绍与提取嵌入的文档
源起看到某个公司内网的公文使用FlexPaper组件来显示文档,在这儿是GoogleCode Project的主页, 还有现在的官方主页.目前FlexPaper是个开源项目,GPLv3 ...
关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题
2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9.10.11小节,下载代码时请注意. 先废话几句.最近用到文档在线浏览功能,之前用的是print2flash(一个 ...
pdftoswf + flexpaper 图片转pdf浏览体验的实现
需要的工具: pdftoswf:http://www.swftools.org/download.html flexpaper包,最好找个破解版的swf文件替换一下里面的swf文件.http://fi ...
PDF2SWF转换只有一页的PDF文档，在FlexPaper不显示解决方法
问题:PDF2SWF转换只有一页的PDF文档,在FlexPaper不显示! FlexPaper 与 PDF2SWF 结合是解决在线阅读PDF格式文件的问题的,多页的PDF文件转换可以正常显示,只有一页 ...
flexpaper源码的编译，去除logo和打印（转）
1.首先下载FlexPaper的源码.下载地址 2. 下载Adobe Flash Builder v4.5 现在最新是4.6了,在adobe网站木找到4.5下载,这里提供下4.5的种子文件 http: ...
借助flexpaper实现word在线预览和打印
为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...

随机推荐

文件input框选择图片实时显示小技巧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Sed命令的使用详细解释
Sed命令的使用详细解释一:sed命令的简介 sed是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处 ...
GDB获取帮助信息
用help 功能,你可以获得GDB 的命令信息. helph 你可以用help(缩写h)不带参数来显示一个命令分类的简短列表. (gdb) help List of classes of comman ...
HDU 6470 【矩阵快速幂】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6470 写这道题是为了让自己不要忘记矩阵快速幂如何推出矩阵式子的. 注意代码是TLE的!! #incl ...
PYTHON 100days学习笔记008-2：模块
目录 Day008_02:模块 1.import语句 1.1from - import 语句 1.2 from - import * 语句 2.深入模块 2.1 __name__属性 2.2 dir( ...
vimium快捷键修改
vimium是一款很好用的浏览器插件,可以用键盘来进行一些操作. 需要在浏览器的扩展程序商店里下载相应的插件,然后可以右键点击插件打开选项进行个性化的配置. map+字母+功能描述功能描述从opti ...
Linux中实用的命令
1. 查看linux机器是32位还是64位的方法: 1.file /sbin/init 或者file /bin/ls (注意命令中的空格) /sbin/init: ELF64- ...
【AtCoder】ARC058
ARC058 C - こだわり者いろはちゃん / Iroha's Obsession 暴力一个个枚举是最简单的方式 #include <bits/stdc++.h> #define fi ...
一文让你明白Redis持久化
网上虽然已经有很多类似的介绍了,但我还是自己总结归纳了一下,自认为内容和细节都是比较齐全的. 文章篇幅有 4k 多字,货有点干,断断续续写了好几天,希望对大家有帮助.不出意外地话,今后会陆续更新 Re ...
spring配置文件和spring mvc配置文件的区别
Question: Are applicationContext.xml and spring-servlet.xml related anyhow in Spring Framework? Will ...

FlexPaper的深入了解和应用

FlexPaper的深入了解和应用的更多相关文章

随机推荐

热门专题